自动将图像重新缩放到网页上较小的预览窗口

Question

我正在尝试使我的网页http://foottherapy.tumblr.com/上的网格窗口中显示的图像显示为重新缩放的版本（即整个图片仅针对网格窗口调整大小）而不是此部分表示。我已经尝试使用修改属性来加权：100％或宽度：100％这些块但它不起作用。 真的很感激任何帮助。

Answer 1

是肯定的。要么调整div大小以匹配缩略图，因为您使用css background-image加载它，或者将其加载到<img>标记中，该标记会自动调整为屏幕上图像的大小。或者，您可以使用＆lt; img height='200' width='200' />强制浏览器进行缩放。浏览器缩放的质量可能不尽如人意，因此通常您希望使用一些软件或代码对其进行预定标，以实现高质量缩放并尊重图像比例。

css中的另一个替代方案是使用新的css3选项：background-size: 200px 50px，但如果您想向广大受众群体展示这一点，则不建议这样做。

Answer 2

使用以下内容：<img src='...' style='width:200px;'/>（200px - 是一个示例，使用您的页面所需的内容）。您还可以通过style ='height：100px'来限制高度。如果同时使用两者，可能会使图像失真（例如，如果要保留比例，请不要同时使用两者）。