CSS可以使图像调整大小并适合任何相同的屏幕

我一直在使用一个临时页面，但我不能让图像调整大小，并在所有屏幕分辨率相同。在iPhone上，它将女孩的腰部切掉，在分辨率为1366 x 768的19英寸笔记本电脑屏幕上观看时，甚至当我从笔记本电脑通过VGA将视频输入55英寸电视时，它都非常适合。但是，当我在分辨率更高的更大显示器上观看时，图像大小结束的地方有一个很大的空间和明显的视图。我想我已经调整了CSS的大小 /*平板电脑景观*/ @媒体屏幕和屏幕（最大宽度：1060px）{ #包装{宽度：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;
}

---

您可以在此处看到：

覆盖此关键字指定背景图像应缩放为尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸

包含此关键字指定背景图像应缩放为尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。因此，尝试使用包含而不是覆盖

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;
    }

---

基本上，这就是您所需要的：

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}

---

很抱歉这么晚才和你回来，但似乎只有一半的身体露出来了。（我也想要双腿）哈哈，事实上，那确实管用。我只是看着小提琴，看到了画面。希望它能缩小到雷兹的另一个尺寸。现在检查我的iPhone。