我有一个网站,有许多页面和不同的背景图片,我从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那样显示图像?


当前回答

你能做的是使用'style'属性将背景图像添加到元素中,这样你仍然会在HTML中调用图像,但你仍然能够使用background-size: cover css行为:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS:

    .image-div{
    background-size: cover;
    }

这就是我如何将background-size: cover行为添加到我需要动态加载到HTML中的元素。然后你可以使用很棒的css类,如background-position: center。繁荣

其他回答

对于IE6,你还需要包括第二行——width: 100%;

.mydiv img {
    max-width: 100%;
    width: 100%;
}
 
background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

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

不,你不能像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/

我不允许'添加一个评论'这样做,但是的,什么Eru Penkman做的是相当到位,让它像背景覆盖所有你需要做的就是改变

.tall-img { margin-top: -50%; 宽度:100%; } .wide-img { margin-left: -50%; 高度:100%; }

TO

.wide-img { margin-left: -42%; 高度:100%; } .tall-img { margin-top: -42%; 宽度:100%; }

你能做的是使用'style'属性将背景图像添加到元素中,这样你仍然会在HTML中调用图像,但你仍然能够使用background-size: cover css行为:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS:

    .image-div{
    background-size: cover;
    }

这就是我如何将background-size: cover行为添加到我需要动态加载到HTML中的元素。然后你可以使用很棒的css类,如background-position: center。繁荣