布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

Bootstrap封面照片大小

在这篇文章中,我将展示如何使用Bootstrap 3创建适当大小的封面照片。

我在网上做了一些调查,没有找到一个简单的列表,建议作为全屏背景(或封面)照片适当的大小。我正在使用Bootstrap 3,所以我希望我的图像大小与Bootstrap 3的网格断点相关。

封面图片大小

如果你使用Bootstrap,那么你知道有4个主要断点:

  • lg-屏幕宽度为1200像素或以上的设备。
  • 医学博士-屏幕宽度为992像素或以上的设备。
  • sm-屏幕宽度为768像素或以上的设备。
  • xs-屏幕宽度小于768像素的设备。

下面是我选定的封面照片尺寸:

  • 2880 x 1620
  • _lg: 1440 x 810
  • _md@2x: 2400 x 1350
  • _md: 1200 x 675
  • 1984 x 1116
  • _sm: 992 x 558
  • 2160 x 3840
  • _xs: 1080 x 1920

一些注意事项:

  • 我有@2x的图像用于高密度显示器(如苹果的视网膜显示器)。
  • xs封面照片的大小是基于iPhone 6 plus的像素尺寸。

少媒体查询

在Bootstrap中使用LESS可以方便地为每个设备目标(xs/sm/md/lg)使用适当大小的图像以及视网膜图形支持来定义封面图像img-retina ()mixin由Bootstrap提供

{位置:相对;宽度:100%;高度:汽车重要的!;&:在{内容:;位置:绝对;:0;正确的:0;:0;:0;z - index:0;.background-size(封面);}&.cover{最小高度:100%;}&.amazing-background-image:在{.img-retina(' /图片/ bg / amazing-background-image \ _xs.jpg ',' /图片/ bg / amazing-background-image \ _xs@2x.jpg”,1080,1920);}@media(min-width:@screen-sm-min){&.amazing-background-image:在{.img-retina(' /图片/ bg / amazing-background-image \ _sm.jpg ',' /图片/ bg / amazing-background-image \ _sm@2x.jpg”,992,558);}}@media(min-width:@screen-md-min){&.amazing-background-image:在{.img-retina(' /图片/ bg / amazing-background-image \ _md.jpg ',' /图片/ bg / amazing-background-image \ _md@2x.jpg”,1200,675);}}@media(min-width:@screen-lg-min){&.amazing-background-image:在{.img-retina(' /图片/ bg / amazing-background-image \ _lg.jpg ',' /图片/ bg / amazing-background-image \ _lg@2x.jpg”,1440,810);}}}

CSS3媒体查询

如果你想要上述较少的代码在香草CSS3,我已经编译它作为一个例子。

{位置:相对;宽度:100%;高度:汽车重要的!;}标题:在{内容:;位置:绝对;:0;正确的:0;:0;:0;z - index:0;-webkit-background-size:封面;-moz-background-size:封面;background-size:封面;}header.cover{最小高度:100%;}header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _xs.jpg ');}@media只有屏幕和(-webkit-min-device-pixel-ratio:2),只有屏幕和(min - moz-device-pixel-ratio:2),只有屏幕和(-o-min-device-pixel-ratio:2/1),只有屏幕和(min-device-pixel-ratio:2),只有屏幕和(min-resolution:192 dpi),只有屏幕和(min-resolution:2 dppx){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _xs@2x.jpg”);background-size:1080 1920;}}@media(min-width:768 px){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _sm.jpg ');}}@media(min-width:768 px)只有筛选和(-webkit-min-device-pixel-ratio:2),(min-width:768 px)只有筛选和(min - moz-device-pixel-ratio:2),(min-width:768 px)只有筛选和(-o-min-device-pixel-ratio:2/1),(min-width:768 px)只有筛选和(min-device-pixel-ratio:2),(min-width:768 px)只有筛选和(min-resolution:192 dpi),(min-width:768 px)只有筛选和(min-resolution:2 dppx){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _sm@2x.jpg”);background-size:992 558;}}@media(min-width:992 px){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _md.jpg ');}}@media(min-width:992 px)只有筛选和(-webkit-min-device-pixel-ratio:2),(min-width:992 px)只有筛选和(min - moz-device-pixel-ratio:2),(min-width:992 px)只有筛选和(-o-min-device-pixel-ratio:2/1),(min-width:992 px)只有筛选和(min-device-pixel-ratio:2),(min-width:992 px)只有筛选和(min-resolution:192 dpi),(min-width:992 px)只有筛选和(min-resolution:2 dppx){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _md@2x.jpg”);background-size:1200 675;}}@media(min-width:1200 px){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _lg.jpg ');}}@media(min-width:1200 px)只有筛选和(-webkit-min-device-pixel-ratio:2),(min-width:1200 px)只有筛选和(min - moz-device-pixel-ratio:2),(min-width:1200 px)只有筛选和(-o-min-device-pixel-ratio:2/1),(min-width:1200 px)只有筛选和(min-device-pixel-ratio:2),(min-width:1200 px)只有筛选和(min-resolution:192 dpi),(min-width:1200 px)只有筛选和(min-resolution:2 dppx){header.amazing-background-image:在{背景图像:url(' /图片/ bg / amazing-background-image \ _lg@2x.jpg”);background-size:1440 810;}}

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。