javascript - 将图像最大宽度和最大高度设置为 100%，但允许图像缩放到大于自身的 100%

Question

我正在尝试将图像缩放到其父图像的 100%。图片的纵横比应保持不变，因此 100% 比例应该是宽度的 100% 或高度的 100%，以先到者为准。我试过使用

max-height: 100%;
max-width: 100%;

只要图像大于它的容器，这就有效。一旦容器变得比图像大，图像就不再拉伸(stretch)到边缘，而是保持其大小的 100%。

浏览器支持是个问题，我试过使用 object-fit: contain; 的 flexbox 但我必须支持 IE10。

考虑以下几点:

.img-container {
  border: solid red 1px;
  margin-bottom: 10px;
}
.img-container img {
  max-height: 100%;
  max-width: 100%;
  border: solid green 1px;
}
.size1 {
  width: 200px;
  height: 50px;
}
.size2 {
  height: 200px;
  width: 50px;
}
.size3 {
  width: 650px;
  height: 650px;
}

<div class="img-container size1">
 <img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

<div class="img-container size2">
 <img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

<div class="img-container size3">
 <img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

.size1 和 .size2 中的图像缩放正确，但 .size3 的容器比图像大，这个应该也拉伸(stretch)到边缘。

我该怎么做呢？纯 CSS 是首选，但 JS 也不是不可能。

Answer 1

看看这个使用 jQuery 的解决方案。

$(document).ready(function(){
 $('img').each(function(){
  let imgHeight = $(this).height();
  let containerHeight = $(this).closest('.img-container').height();
  if(imgHeight > containerHeight){
    $(this).css('width','auto');
    $(this).css('height', '100%');
  }
 });
});

.img-container {
  border: solid red 1px;
  margin-bottom: 10px;
}
.img-container img {
  width: 100%;
  height: auto;
  border: solid green 1px;
}
.size1 {
  width: 200px;
  height: 50px;
}
.size2 {
  height: 200px;
  width: 50px;
}
.size3 {
  width: 650px;
  height: 650px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container size1">
 <img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

<div class="img-container size2">
 <img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

<div class="img-container size3">
 <img src="https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>