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

Question

我一直在http://www.flywavez.com上使用临时页面，但我无法调整图像大小并在所有屏幕分辨率中保持相同。 在iPhone上它可以在腰部之前将女孩剪掉，并且在我的19英寸笔记本电脑屏幕上以1366 x 768的分辨率观看时非常适合，甚至在我从笔记本电脑通过VGA将视频输送到我的55英寸电视时也是如此。 然而，当我在更大分辨率的较大显示器上观看时，图像大小结束时有一个很大的空间和明显的视图。 我以为我用/ * Tablet Landscape * / @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上看到的所有分辨率上显示。

谢谢你的帮助。

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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