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

Posted 2023-03-06

【中文标题】如何设置 img 的最小和最大尺寸并保持纵横比？ [复制]

【英文标题】：How do I set min and max size for img and keep aspect ratio? [duplicate]

【发布时间】：2018-09-07 06:29:42

【问题描述】：

所以我有一个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 等的图像相同。

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

【问题讨论】：

使用object-fit:css-tricks.com/almanac/properties/o/object-fit。最小/最大宽度无助于保持纵横比的原因是它本身就是一个悖论：非方形图像应该优先考虑哪个维度？

@PeterB 该答案似乎没有适合对象的答案，在我看来这是最好的答案。

重复不是关于可能的答案，而是关于问题:-)

@PeterB link 说，这个问题在这里可能已经有了答案，但主要答案已经过时了，所以用更好的答案结束这个问题会有什么好处。

然后在目标问题上开一个赏金，要求新的答案

【参考方案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>

【讨论】：

我从这个问题和你的回答中学到了一些新东西。好东西。让我看到这篇关于 IE/Edge 的 polyfill 的关于对象匹配的文章：medium.com/@primozcigler/…

@Terry ，感谢 object-fit 完美运行并且操作简单，这对我来说已经足够了，IE 支持并不关心我。

【参考方案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 更好？

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

【讨论】：

谢谢你的好解决方案，我理解你对对象匹配的担忧，但是空白边框对我来说不是问题，使用对象匹配比我计算图像大小要简单得多javascript 和更改 CSS。因此，为了让我的代码简洁，我将坚持使用 object-fit