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

提问者：小点点

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

因此，我有一个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等图像相同。

注意可能重复链接帖子上的答案已经过时，而且不太好

共2个答案

匿名用户

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

解决您的难题有两个解决方案：一个是使用对象匹配，这是相当广泛的支持，但不幸的是，在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>

匿名用户

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

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

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

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