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

将图像放入容器中并检查滚动，如果有滚动 - ＆gt;调整否则什么都不做或将容器的大小减小到图像大小（取决于您的流量需求）

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