Javascript Div在不拉伸/溢出的情况下保持原始大小的图像

我有这样一个html页面：

梅因先生{ 最大宽度：500px； 最小高度：500px； 保证金：自动； } .图像容器{ 宽度：100%； 背景色：黑色； 最小高度：200px； 高度：300px； } img{ 对象匹配：包含； 高度：200px； } 使用现代化工具

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');
        }  
    });
}

因此，您可以像这样使用对象拟合：

这将把图像的src复制到容器的背景图像源。此外，我们对SCS进行了一些更改：

---

是的，我知道它可能会起作用，但是，我不确定，compat对象的属性是否适合设计>你能提出建议吗？你能给我一个这样做的例子吗？我尝试过这个解决方案，但在我看来，它将适合对象：封面不包含

.post__featured-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
 }

.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;
 }
}