我一直在使用http://www.flywavez.com的临时页面,但我无法调整图像大小并在所有屏幕分辨率中保持相同。在iPhone上它可以在腰部之前将女孩剪掉,并且在我的19英寸笔记本电脑屏幕上以1366 x 768的分辨率观看时非常适合,甚至在我从笔记本电脑通过VGA将视频输送到我的55英寸电视时也是如此。然而,当我在更大分辨率的较大显示器上观看时,图像大小结束时有一个很大的空间和明显的视图。我以为我用CSS调整了CSS / *平板电脑风景* / @media屏幕和(max-width:1060px){ #wrapper {width:67%; } }
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
img { max-width: 100%; }
}
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
}
我希望此图像能够在所有分辨率上显示,就像在1366 x 768上看到的一样。
感谢您的帮助。
答案 0 :(得分:26)
我认为根本不可能在不丢失图像比率的情况下实现您想要做的事情,这可能是不可取的。您是否考虑过使用'background-size'属性?下面的css看起来很漂亮:
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
您可以在此处查看:http://jsfiddle.net/DTN54/
答案 1 :(得分:7)
cover此关键字指定应将背景图像缩放到尽可能小,同时确保其尺寸大于或等于背景定位区域的相应尺寸。
contains此关键字指定应将背景图像缩放到尽可能大,同时确保其尺寸小于或等于背景定位区域的相应尺寸。所以尝试使用contains而不是cover
100%这将在不进行任何裁剪的情况下将高度和宽度均缩放100%。
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
答案 2 :(得分:0)
基本上,这就是你所需要的:
body {
background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}