我有一个网站,有许多页面和不同的背景图片,我从CSS显示它们,像这样:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

但是,我想在一个页面上使用<img>元素显示不同的(全屏)图片,并且我希望它们具有与上面的background-image相同的属性:cover;属性(图像不能显示从CSS,他们必须显示从HTML文档)。

通常我使用:

div.mydiv img {
    width: 100%;
}

Or:

div.mydiv img {
    width: auto;
}

使画面饱满,反应灵敏。然而,当屏幕变得太窄时,图片会收缩太多(宽度:100%),并在底部屏幕显示身体的背景色。另一种方法width: auto;只使图像完全大小,不响应屏幕大小。

是否有一种方法可以像background-size: cover那样显示图像?


当前回答

实际上有一个非常简单的css解决方案,甚至可以在IE8上工作:

.container { position: relative; overflow: hidden; /* Width and height can be anything. */ width: 50vw; height: 50vh; } img { position: absolute; /* Position the image in the middle of its container. */ top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; /* The following values determine the exact image behaviour. */ /* You can simulate background-size: cover/contain/etc. by changing between min/max/standard width/height values. These values simulate background-size: cover */ min-width: 100%; min-height: 100%; } <div class="container"> <img src="http://placehold.it/200x200" alt="" /> </div>

其他回答

尝试同时设置min-height和min-width,使用display:block:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

(小提琴)

如果你的图像的包含元素是position:relative或position:absolute,图像将覆盖容器。然而,它不会集中。

如果你知道它是水平溢出(设置margin-left:-50%)还是垂直溢出(设置margin-top:-50%),你可以很容易地将图像居中。可以使用CSS媒体查询(和一些数学)来解决这个问题。

实际上有一个非常简单的css解决方案,甚至可以在IE8上工作:

.container { position: relative; overflow: hidden; /* Width and height can be anything. */ width: 50vw; height: 50vh; } img { position: absolute; /* Position the image in the middle of its container. */ top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; /* The following values determine the exact image behaviour. */ /* You can simulate background-size: cover/contain/etc. by changing between min/max/standard width/height values. These values simulate background-size: cover */ min-width: 100%; min-height: 100%; } <div class="container"> <img src="http://placehold.it/200x200" alt="" /> </div>

使用CSS可以模拟对象匹配:[cover| include];使用transform和[max|min]-[width|height]。 它并不完美。这在一种情况下不起作用:如果图像比容器更宽或更短。

.img-ctr{ background: red;/*visible only in contain mode*/ border: 1px solid black; height: 300px; width: 600px; overflow: hidden; position: relative; display: block; } .img{ display: block; /*contain:*/ /*max-height: 100%; max-width: 100%;*/ /*--*/ /*cover (not work for images wider and shorter than the container):*/ min-height: 100%; width: 100%; /*--*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <p>Large square: <span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span> </p> <p>Small square: <span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span> </p> <p>Large landscape: <span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span> </p> <p>Small landscape: <span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span> </p> <p>Large portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span> </p> <p>Small portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span> </p> <p>Ultra thin portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span> </p> <p>Ultra wide landscape (images wider and shorter than the container): <span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span> </p>

不,你不能像background-size:cover那样得到它,但是。

这种方法非常接近:它使用JavaScript来确定图像是横向的还是纵向的,并相应地应用样式。

JS

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

遇到完全相同的症状。以上对我来说很管用。