使用 CSS 调整图像大小，使其同样适合任何屏幕

我一直在使用 http://www.flywavez.com 上的临时页面，但我无法调整图片大小，也无法使其在所有屏幕分辨率下都一样。在 iPhone 上，女孩在腰部之前就被剪掉了，而在我的 19" 笔记本电脑屏幕上观看时，分辨率为 1366 x 768，甚至当我从笔记本电脑通过 VGA 将视频传输到我的 55" 电视机上时，它都非常适合。但是，当我在分辨率更高的大屏幕上观看时，就会发现图像大小的尽头有一个很大的空间和明显的视图。我以为我用 CSS 调整了大小 / 平板电脑横向 / @media screen and (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 上显示一样。

感谢您的帮助。

编程
image css responsive-design
1日 十一月 2013 в 3:57
尚无意见
解决办法

我认为，从根本上说，要想在不损失图像比例的情况下实现您想要做的事情是不可能的，这可能是不可取的。你是否考虑过使用 '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/

Phil
编辑本段答案22日 八月 2017 в 2:31
评论(2)

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;
    }
0_jump
编辑本段答案2日 十一月 2017 в 10:37
评论(0)

基本上，这就是你所需要的一切：

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
deChristo
编辑本段答案13日 十二月 2016 в 12:09
评论(0)