缩小大图像答案

【问题标题】：Scaling down large images缩小大图像
【发布时间】：2011-10-23 09:35:33
【问题描述】：

我刚开始创建一个图像查看器作为一个项目，但我被困在了这一点上。

我使用了<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 图像查看器插件，但我想自己制作。

【问题讨论】：

【解决方案1】：

您可以在图像上尝试 CSS 样式“最大宽度”。

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

我将 CSS 内联仅用于演示目的。

【讨论】：

【解决方案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();

【讨论】：