Question

我有200px到200px的img。我有一个img的容器。容器尺寸为100％x100％。基本上容器的大小取决于窗口大小。我想要实现的是如果屏幕尺寸小于200px，它应该调整img的大小并使其更小。我也想保持img的比例。它应该从高度和宽度变小。这是否有准备好的代码？

Answer 1

只需添加：

img { max-width: 100%; }

到您的CSS（可能更适合您的选择器）并确保您的容器已指定position: relative。

您可能希望确保容器的宽度不超过图像的宽度，因为它将开始变为像素化。如果这不是问题，您可以使用上面的max-width替换width。 Example here

Answer 2

使用CSS将图像的宽度或高度设置为100％。如果仅指定其中一个值，则将计算另一个值，以便保留图像的宽高比。

Answer 3

调整图像大小不是一个好选择，因为它会降低网站的整体性能，导致渲染页面的时间更长，并且会吞没用户的RAM。