时间戳

首页 > 解决方案 > 在不知道图像方向的情况下，将图像以较小的一侧适合容器

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

问题描述

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

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

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

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

标签： htmlcssimageresponsive

解决方案

仅使用 CSS 即可，但不支持跨浏览器。你好，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>出于可访问性目的（想想屏幕阅读器、标题属性等），我会将元素保留在其中，仍然隐藏。

推荐阅读