缩小大图像

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();