如何设置 img 的最小和最大尺寸并保持纵横比？ [复制]

Question

所以我有一个img 框，用户可以在上面放一张图片。 CSS 目前确保无论图片的原始尺寸是多少，都将使用此 CSS 显示为 300x300 的图片

因此，将增加 200x200 的图像以完全适合，而将减少 400x400 的图像以完全适合 300x300 的 img 元素。

.largeartwork img {
    max-width:300px;
    max-height:300px;
    min-width:300px;
    min-height:300px;
    border: 3px solid black;
}

这可以正常工作，但我想要为非方形图像做的是尽可能填充空间但保持纵横比

例如，300x200（300 像素宽，200 像素高）的图像应该只填充宽度而不是高度，与 600x400 等的图像相同。

可能重复的注意事项 链接帖子上的答案已过时，效果不佳

Answer 1

根据我的评论，使用最小/最大宽度和高度并不能保证保留图像的纵横比，因为在调整图像大小时，浏览器需要决定优先考虑哪个维度（水平或垂直）。由于在这种情况下它无法决定，因此任何非方形图像都将被压缩或拉伸，因为它们的纵横比与您指定的不匹配。

您的难题有两种解决方案：一种是使用object-fit，即rather widely supported but unfortunately not in Internet Explorer。示例标记如下所示：

<div class="largeartwork">
  <img src="/path/to/image" />
</div>

您的 CSS 将是：

.largeartwork img {
    width: 300px;
    height: 300px;
    border: 3px solid black;
    object-fit: contain;
}

请参阅下面的概念验证代码 sn-p：

.largeartwork img {
    width: 300px;
    height: 300px;
    border: 3px solid black;
    object-fit: contain;
}

<!-- Landscape -->
<div class="largeartwork">
  <img src="https://via.placeholder.com/350x150" />
</div>

<!-- Portrait -->
<div class="largeartwork">
  <img src="https://via.placeholder.com/150x350" />
</div>

<!-- Small square image -->
<div class="largeartwork">
  <img src="https://via.placeholder.com/100x100" />
</div>

<!-- Large square image -->
<div class="largeartwork">
  <img src="https://via.placeholder.com/400x400" />
</div>

---

另一种解决方案是改用background-image。您将不得不依赖 JS 将图像源作为元素的背景注入。优点是background-size: contain is very widely supported，即使在 Internet Explorer 9 中。示例代码：

<div class="largeartwork" style="background-image: url(/path/to/image);"></div>

还有你的 CSS：

.largeartwork {
    width: 300px;
    height: 300px;
    border: 3px solid black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

请参阅下面的概念验证代码：

.largeartwork {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

<div class="largeartwork" style="background-image: url('https://via.placeholder.com/350x150')"></div>

<div class="largeartwork" style="background-image: url('https://via.placeholder.com/150x350')"></div>

<div class="largeartwork" style="background-image: url('https://via.placeholder.com/100x100')"></div>

<div class="largeartwork" style="background-image: url('https://via.placeholder.com/400x400')"></div>

Answer 2

当宽度或高度的最大值和最小值相同时，表示固定值如下：

.largeartwork img {
    width:300px;
    height:300px;
}

在你的情况下，你可以用这个方法解决你的问题：

当用户删除图像文件时，您可以检查图像的哪一侧更大，并且可以将正确的类添加到图像标记中。例如：

像这样创建 CSS 类：

.largeartwork img.biggerwidth {
    width: 300px;
    height: auto;
}
.largeartwork img.biggerheight {
    width: auto;
    height:300px;
}

当用户丢弃 200x500 像素的图像时，您可以像这样创建图像：

<img src="..." class="biggerheight">

为什么这比 background-image 和 object-fit 更好？

在这些方法中，如果图像大小没有覆盖所有元素区域，您将在元素上获得空白。由于您在元素上使用边框，因此这些方法始终会在您指定的最大尺寸周围创建边框。