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;
}

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

.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-imgae: 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">

为什么这比背景图像和对象适合更好？

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

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

2 个答案: