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

Question

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

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

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

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

Answer 1

一种解决方案是将图像显示为背景图像。缺点是图像的行为与<img> 标记不同。

您可以在 <div> 或类似的东西上使用以下 CSS：

height: [HEIGHT] px;
width: [WIDTH] px;
background-image: url('[URL]');
background-size: cover;

Answer 2

这可以仅使用 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> 元素保留在其中，但仍处于隐藏状态。