我有一个网站，有许多页面和不同的背景图片，我从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那样显示图像?
当前回答
解决方案#1 -对象匹配属性(缺乏IE支持)
只需设置对象适合:覆盖;在img上。
身体{ 保证金:0; ｝ img { 显示:块; 宽度:100大众; 身高:100 vh; object-fit:封面;/*或object-fit:包含;* / ｝ <img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />
关于object-fit: cover:
替换的内容大小保持其纵横比 填充元素的整个内容框。如果物体的纵横比 不匹配它的长宽比的盒子，那么对象会是什么 剪得合身。
对于object-fit:包含:
被替换的内容被缩放以保持其纵横比，同时适应元素的内容框。整个对象被用来填充方框，同时保留其长宽比，因此如果对象的长宽比与方框的长宽比不匹配，则该对象将被“字母盒化”。
另外，请参阅这个Codepen演示，它比较了应用于图像的object-fit: cover和应用于背景图像的background-size: cover
解决方案#2 -用css的背景图像替换img
身体{ 保证金:0; ｝ img { 位置:固定; 宽度:0; 高度:0; 填充:50vh 50vw; 背景:url(“https://loremflickr.com/1500/1000”)无重复; background-size:封面; ｝ <img src="https://via.placeholder.com/1500x1000" alt="A random image from Flickr" />
其他回答
我不允许'添加一个评论'这样做，但是的，什么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%; ｝
实际上有一个非常简单的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>
我知道这是旧的，但是我上面看到的许多解决方案都有一个问题，图像/视频对于容器来说太大了，所以实际上不像背景大小的封面。然而，我决定创建“实用类”，这样它就可以用于图像和视频。你只需给容器一个类.media-cover-wrapper，给媒体项目本身一个类.media-cover
然后你就有了下面的jQuery:
function adjustDimensions(item, minW, minH, maxW, maxH) {
item.css({
minWidth: minW,
minHeight: minH,
maxWidth: maxW,
maxHeight: maxH
});
} // end function adjustDimensions
function mediaCoverBounds() {
var mediaCover = $('.media-cover');
mediaCover.each(function() {
adjustDimensions($(this), '', '', '', '');
var mediaWrapper = $(this).parent();
var mediaWrapperWidth = mediaWrapper.width();
var mediaWrapperHeight = mediaWrapper.height();
var mediaCoverWidth = $(this).width();
var mediaCoverHeight = $(this).height();
var maxCoverWidth;
var maxCoverHeight;
if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {
if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
maxCoverWidth = '';
maxCoverHeight = '100%';
} else {
maxCoverWidth = '100%';
maxCoverHeight = '';
} // end if
adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
} else {
adjustDimensions($(this), '100%', '100%', '', '');
} // end if
}); // end mediaCover.each
} // end function mediaCoverBounds
当调用它时，请确保注意页面大小的调整:
mediaCoverBounds();
$(window).on('resize', function(){
mediaCoverBounds();
});
然后下面的CSS:
.media-cover-wrapper {
position: relative;
overflow: hidden;
}
.media-cover-wrapper .media-cover {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
是的，它可能需要jQuery，但它的响应相当好，行为完全像background-size: cover，你可以在图像和/或视频上使用它来获得额外的SEO价值。
不，你不能像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/
假设您可以安排一个希望填充的容器元素，这似乎是可行的，但感觉有点笨拙。本质上，我只是在更大的区域上使用min/max-width/height，然后将该区域缩小到原始尺寸。
.container { width: 800px; height: 300px; border: 1px solid black; overflow:hidden; position:relative; } .container.contain img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; max-width: 10%; max-height: 10%; -webkit-transform:scale(10); transform: scale(10); } .container.cover img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto auto; min-width: 1000%; min-height: 1000%; -webkit-transform:scale(0.1); transform: scale(0.1); } <h1>contain</h1> <div class="container contain"> <img src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" /> <!-- 366x200 --> </div> <h1>cover</h1> <div class="container cover"> <img src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" /> <!-- 366x200 --> </div>
