將圖像自動重新縮放到網頁上的較小預覽窗口

Question

我正在嘗試使網頁上顯示的圖像在我的網頁上顯示爲http://foottherapy.tumblr.com/作爲重新縮放版本（即整個圖片只調整網格窗口大小），而不是這部分表示。我試過使用修改屬性來提高：100％或寬度：100％的這些塊，但它沒有奏效。 任何幫助是真正的讚賞。

Answer 1

是的。調整div大小以匹配縮略圖，因爲您使用css background-image加載它，或將其加載到<img>標記中，該標記將自動調整爲屏幕上圖像的大小。或者，您可以使用< img height='200' width='200' />來強制瀏覽器進行縮放。瀏覽器縮放的質量可能不盡如人意，所以通常您需要使用一些軟件或代碼進行預分頻，這些軟件或代碼可以高質量縮放，並且可以尊重圖像比例。

css中的另一種替代方法是使用新的css3選項：background-size: 200px 50px，但如果您想向廣泛的受衆展示此選項，則不推薦這麼做。

Answer 2

使用以下內容：<img src='...' style='width:200px;'/>（200px - 是一個示例，使用您所需的頁面）。您還可以通過style ='height：100px'來限制高度。如果同時使用兩者，則可能會扭曲圖像（即，如果要保留比例，則不要同時使用兩者）。