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

24 浏览
0 Comments

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

这个问题在此处已有答案:

CSS强制图像调整大小并保持纵横比

所以我有一个img盒子，用户可以在上面拖放图像。目前的CSS确保无论图像的原始大小如何，都将显示为300x300的图像，使用以下CSS：

因此，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的图像。

关于重复可能性的说明

相关帖子的答案已过时且不够好。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

当宽度或高度的最大值和最小值相同时，它表示固定值，就像这样：

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

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

当用户放置图像文件时，您可以检查图像的哪一边更大，并向图像标记添加正确的类。例如：

创建如下所示的CSS类：

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

当用户放置像200x500像素这样的图片时，您可以创建如下所示的图片：

为什么这比背景图和object-fit更好？

在这些方法中，如果图像大小不覆盖元素区域的所有部分，则元素上会出现白色空白。因为您在元素上使用了边框，这些方法始终在您指定的最大尺寸周围创建边框。

0
0 Comments

根据我的评论，使用最小/最大宽度和高度不能保证保持图像的宽高比，因为在调整图像大小时，浏览器需要决定哪个尺寸（水平或垂直）具有优先权。由于在这种情况下无法决定，任何非方形图像都会被拉伸或压缩，因为它们的宽高比与您指定的不匹配。\n\n您的谜团有两个解决方案：一个是使用object-fit，它在相当广泛地支持但不幸的是在Internet Explorer中不支持。一个示例标记将如下所示：\n\n

\n\n然后您的CSS将是：\n\n

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

\n\n请参见以下概念验证代码段：\n\n

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

\n

\n\n

\n\n另一种解决方案是改用background-image。您将不得不依赖JS将图像源作为元素的背景注入。优点是，background-size: contain 在非常广泛地支持，即使在Internet Explorer 9中也是如此。示例代码：\n\n



\n\n然后您的CSS将是：\n\n


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



\n\n请参见以下概念验证代码：\n\n


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


\n





									

				

									

			

			
0