我一直在使用 http://www.flywavez.com 的临时页面但我无法让图像调整大小并在所有屏幕分辨率下都相同。在 iPhone 上,它在腰部之前剪掉了女孩,在我的 19 英寸笔记本电脑屏幕上观看时非常适合,分辨率为 1366 x 768,甚至当我从笔记本电脑通过 VGA 将视频传送到我的 55 英寸电视时也是如此。但是,当我在分辨率更高的大型显示器上查看时,图像尺寸结束的地方有很大的空间和明显的视野。我以为我已经调整了 CSS 的大小 /* 平板电脑横向 */ @media 屏幕和(最大宽度:1060px){ #wrapper { 宽度: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 上看到的一样。
感谢您的帮助。
最佳答案
我认为在不损失图像比例的情况下根本不可能实现您想要做的事情,这可能是不可取的。您是否考虑过使用“背景大小”属性?下面的 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/
关于CSS使图像调整大小并适合任何屏幕相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19720550/