我一直在使用 http://www.flywavez.com 上的临时页面,但我无法调整图片大小,也无法使其在所有屏幕分辨率下都一样。在 iPhone 上,女孩在腰部之前就被剪掉了,而在我的 19" 笔记本电脑屏幕上观看时,分辨率为 1366 x 768,甚至当我从笔记本电脑通过 VGA 将视频传输到我的 55" 电视机上时,它都非常适合。但是,当我在分辨率更高的大屏幕上观看时,就会发现图像大小的尽头有一个很大的空间和明显的视图。我以为我用 CSS 调整了大小 / 平板电脑横向 / @media screen and (max-width: 1060px) {
}
/* 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 上显示一样。
感谢您的帮助。
我认为,从根本上说,要想在不损失图像比例的情况下实现您想要做的事情是不可能的,这可能是不可取的。你是否考虑过使用 '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;
}
您可以在这里看到:
cover 该关键字指定背景图片应尽可能缩小,同时确保其尺寸大于或等于背景定位区域的相应尺寸。
contain 该关键字指定背景图像应尽可能放大,同时确保其尺寸小于或等于背景定位区域的相应尺寸。因此,请尝试使用 contain 而不是 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;
}