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>元素保留在其中，但仍然隐藏（例如屏幕阅读器，标题属性等）。

Answer 2

一种解决方案是将图像显示为背景图像。缺点是图片的行为不会完全像<img>标签。

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

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

在不知道图像方向的情况下通过较小的一侧将图像放入容器中

2 个答案: