html - 在不知道图像方向的情况下，将图像以其较小的一侧适合容器

Question

我有一个给定大小的容器(例如一个正方形)。 现在我想将容器内部的图像通过其较小的一侧适合其父容器，而较大的一侧会溢出容器。 换句话说:较小的一侧应该完全匹配 100%，但两者都应该 >= 容器的 100%。这一切都没有挤压图像。

它应该独立于图像方向是横向还是纵向，因为我想在不知道图像的方向的情况下涵盖这两种情况。

是否可以通过说图像的最小宽度和最小高度等于父容器的高度和宽度来解决它？或者有人有任何其他简单的解决方案吗？

感谢任何提示 谢谢，塞巴斯蒂安

Answer 1

这仅使用 CSS 是可能的，但它是 not supported跨浏览器。你好，IE:

img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
}

看到它工作:

.sized-container {
  width: 25vw;
  height: 25vw;
  display: inline-block;
  float: left;
}
.sized-container img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
}
body {margin :0;}

<div class="sized-container">
  <img src="https://loremflickr.com/640/360">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/360/640">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/100/100">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/1000/1000">
</div>

---

对于跨浏览器的解决方案，您必须依赖 JavaScript。
隐藏 <img>元素同时捕获他们的 src设置容器背景的值。容器有 background-size:cover提供您正在寻找的确切大小和裁剪行为。
该解决方案还会放大小图像以适应大小父级的宽度/高度:

let containers = document.querySelectorAll('.sized-container');
for (let i = 0; i < containers.length; i++) {
  var container = containers[i],
      image = container.querySelector('img');
  if (image)
    container.style.backgroundImage = 'url(' + image.getAttribute('src') + ')'
}

.sized-container {
  width: 25vw;
  height: 25vw;
  background: transparent 50% 50% no-repeat /cover;
  float: left;
}
.sized-container img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
body { margin: 0;}

<div class="sized-container">
  <img src="https://loremflickr.com/640/360">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/360/640">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/100/100">
</div>
<div class="sized-container">
  <img src="https://loremflickr.com/1000/1000">
</div>

如果使用 jQuery，脚本会更短一些:

$('.sized-container').each((i,e) => {
  let img = $('img', e);
  if (img.is('img'))
    $(e).css({backgroundImage:'url(' + img.first().attr('src') + ')'});
})

重要说明:显然，如果您可以控制标记，则应设置 background-image生成标记时父级的，因此您不必使用 JavaScript 从图像中获取它。但是，我会离开 <img>中的元素，仍然隐藏，用于可访问性目的(想想屏幕阅读器、标题属性等)。