縮小大圖像

Question

我剛開始創建一個圖像查看器作爲一個項目，但我堅持在這一點上。我使用<img src="some.jpg" width="500" height="500" />。 問題在於，如果圖像寬度接近500或大於500，但效果不錯，但是 如果圖像大小超過200或100或300，該怎麼辦？

它將具有200寬度尺寸的圖像展開爲500，這使得我的圖像看起來很糟糕，這不是我想要的。我只是希望大於500的圖像減少到500，而像200或300寬度尺寸的圖像應該與200或300相同。

如果我使用<img src="some.jpg" />，它將使用默認圖像尺寸。

jQuery解決方案也非常感謝。我可以在網上找到很多jQuery圖像查看器插件，但我想製作自己的。

Answer 1

您可以嘗試圖像上的CSS樣式「max-width」。

<img src="some.jpg" style="max-width:500px"/>. 

我把CSS內聯僅用於演示目的。

Answer 2

把圖像中的容器，檢查滾動， 如果有一個滾動 - >調整 別的什麼都不做或減少容器圖像尺寸的大小（根據您的流量需求）

<div class="imgCont" style="width:500px;height:500px;overflow:hidden"> 
<img src="some.jpg" /> 
</div> 

檢查垂直滾動的示例（使用jQuery）：

var el = $(".imgCont"), 
    hasVerticalScroll = el.get(0).scrollHeight > el.innerHeight();