我有一个像这样的html页面：
<html>
<head>
<style>
.main {
max-width:500px;
min-height:500px;
margin:auto;
}
.image-container {
width:100%;
background-color:black;
min-height: 200px;
height:300px;
}
img {
object-fit: contain;
height:200px;
}
</style>
</head>
<body>
<div class="main">
<div class="image-container">
<img src="https://i.gyazo.com/3a4b9b23d8d1a179b75472d58bc55fe3.jpg" style="width:100%"/>
</div>
</div>
</body>
</html>这个对象非常适合谷歌chrome和firefox，但不幸的是不在IE浏览器中。我不想用作背景图像，因为我将来会在旋转木马中使用这个图像吗？有没有其他选择，以便我在一个固定的高度div中适应图像而不会拉伸和溢出？注意：对象适合：包含完全满足我的要求但在IE上失败。
所以你使用像这样的对象：
.post__featured-image {
width: 120px;
height: 120px;
object-fit: cover;
}
这会将我们图像的src复制到容器的背景图像源。我们进一步改变我们的SCSS：
.post {
&__image-container {
width: 120px; // the same width and height as for the <img>
height: 120px;
&.compat-object-fit {
background-size: cover;
background-position: center center;
.post__featured-image { // hide image if object fit is not supported - opacity to 0 for the link area
opacity: 0;
}
}
}
&__featured-image {
width: 120px;
height: 120px;
object-fit: cover;
}
}
使用Modernizr。
if ( ! Modernizr.objectfit ) {
$('.post__image-container').each(function () {
var $container = $(this),
imgUrl = $container.find('img').prop('src');
if (imgUrl) {
$container
.css('backgroundImage', 'url(' + imgUrl + ')')
.addClass('compat-object-fit');
}
});
}