如何将图像的原始大小设置为不超过父容器的宽度

Question

我想设置图像的原始宽度，所以最大宽度：100%，但是图像的父容器的宽度是1000px，图像的原始大小不能超过1000px。我希望图像的原始大小小于 1000px。如果图像的宽度大于 1000 像素，请将图像大小设置为 1000 像素

img {max-width: 100%, width: 100%};
.container {width: 1000px};

我设置了image max-width: 100%，以便图像显示原始大小。我设置了width: 100%以防止图像的原始大小超过父容器的 1000px 宽度，但它不起作用

我希望图像的原始大小小于 1000px。如果图像的宽度大于 1000 像素，请将图像大小设置为 1000 像素

Answer 1

如果您不希望图像超出容器，则设置max-width: 100%img是正确的。

但是，您不必设置imgwidth: 100%即可以原始大小显示图像。只需width: auto，或者您可以跳过它，因为默认情况下图像的宽度是auto的。

width: 100%是指您的图像将缩放到当前父元素的 100%。这意味着width: 100%只会使您的图像放大或缩小到 1000 像素的宽度。

只需取出width: 100%，魔法就完成了。

Answer 2

尝试设置

img {
height: 100%,
width: 100%;
object-fit: contain;
}