如何將圖像的原始大小設置為不超過父容器的寬度

Question

我想設置圖片的原始寬度，所以max-width: 100%，但是圖片的父容器的寬度是1000px，圖片的原始大小不能超過1000px。 我希望圖像的原始大小小於 1000 像素。 如果圖片寬度大於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%只會使您的圖像放大或縮小到 1000px 寬度。

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

Answer 2

嘗試設置

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