如何调整图像大小取决于分辨率？答案

【问题标题】：How to resize an img depends on the resolution?如何调整图像大小取决于分辨率？
【发布时间】：2012-01-07 22:32:28
【问题描述】：

我有一个 200 像素乘 200 像素的图像。我有一个 img 的容器。容器大小为 100%x100%。基本上容器的大小取决于窗口大小。我想要实现的是，如果屏幕尺寸小于 200px，它应该调整 img 的大小并使其更小。我也想保持img的比例。它应该从高度和宽度变小。有没有现成的代码可以做到这一点？

【问题讨论】：

标签： jquery css resize image resolution

【解决方案1】：

只需添加：

img { max-width: 100%; }

到您的 CSS（可能更具体地使用您的选择器）并确保您的容器已指定 position: relative。

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

【讨论】：

我支持这个。如果你真的需要了解细节，你总是可以为 200px 宽度添加一个 css 媒体查询，这样只有在达到该分辨率后才会生效：@media all and (max-width: 200px) { img {max-width:100%;} }

【解决方案2】：

调整图像大小不是一个好的选择，因为它会降低您网站的整体性能，它会导致更多时间来呈现页面，并且会占用您用户的 RAM。

【讨论】：

虽然我同意应尽可能避免在静态图像（如图标）上使用，但在这种情况下，在浏览器上调整图像大小是完全可以接受的。如果不使用它们的功能，我们为什么还要拥有强大的浏览器？
嗨朋友同意，请阅读此rackaid.com/resources/fix-slow-sites

【解决方案3】：

只需使用 CSS 将图像的宽度或高度设置为 100%。如果您仅指定其中一个值，则会计算另一个值以保留图像的纵横比。

【讨论】：