javascript - 如何设置图片的原始大小不超过父容器的宽度

Question

我想设置图片的原始宽度，所以max-width: 100%，但是图片的父容器宽度是1000px，图片的原始尺寸不能超过1000px。我希望图像的原始大小小于 1000px。如果图片宽度大于1000px，则设置图片大小为1000px

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

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

我希望图片的原始尺寸小于 1000 像素。如果图片宽度大于1000px，则设置图片大小为1000px

Answer 1

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

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

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

只需取出width: 100%，即magic完成了。