对于图像元素，是否有一个等同于background-size: cover和contains的方法?

你能做的是使用'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。繁荣

我需要模拟background-size: contain，但由于缺乏支持，无法使用object-fit。我的图像有定义尺寸的容器，这最终为我工作:

.image-container {
height: 200px;
width: 200px;
overflow: hidden;
background-color: rebeccapurple;
border: 1px solid yellow;
position: relative;
}


.image {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

<!-- wide -->
<div class="image-container">
<img class="image" src="http://placehold.it/300x100">
</div>


<!-- tall -->
<div class="image-container">
<img class="image" src="http://placehold.it/100x300">
</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价值。

我们可以采用ZOOM方法。我们可以假设，如果方面图像的高度或宽度小于所需的高度或宽度，最大30%(或更高至100%)可以是缩放效果。我们可以用overflow: hidden隐藏其他不需要的区域。

.image-container {
width: 200px;
height: 150px;
overflow: hidden;
}
.stage-image-gallery a img {
max-height: 130%;
max-width: 130%;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

这将调整不同宽度或高度的图像。

我找到了一个简单的解决方案来模拟覆盖和包含，这是纯CSS，适用于具有动态尺寸的容器，也没有对图像比例进行任何限制。

注意，如果你在16之前不需要支持IE或Edge，那么你最好使用object-fit。

background-size:封面

.img-container {
position: relative;
overflow: hidden;
}


.background-image {
position: absolute;
min-width: 1000%;
min-height: 1000%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.1);
z-index: -1;
}

<div class="img-container">
<img class="background-image" src="https://picsum.photos/1024/768/?random">
<p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

在这里使用1000%是为了防止图像的自然大小大于它正在显示的大小。例如，如果图像是500x500，但容器只有200x200。使用这个解决方案，图像将被调整到2000x2000(由于min-width/min-height)，然后缩小到200x200(由于transform: scale(0.1))。

x10因子可以用x100或x1000来代替，但是在20x20的div上渲染2000x2000的图像通常不理想。:)

background-size:包含

.img-container {
position: relative;
overflow: hidden;
z-index: 0;
}


.background-image {
position: absolute;
max-width: 10%;
max-height: 10%;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(10);
z-index: -1;
}

<div style="background-color: black">
<div class="img-container">
<img class="background-image" src="https://picsum.photos/1024/768/?random">
<p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>