调整图像大小以适应较小的浏览器答案

【问题标题】：Resizing images to fit smaller browsers调整图像大小以适应较小的浏览器
【发布时间】：2013-05-17 17:18:45
【问题描述】：

我已经在这里搜索了几个星期的问题，但没有找到答案，所以就这样吧：

我创建了一个相当大的图像 (800x1000px) 来显示在我的网站中心。我在考虑大屏幕分辨率的情况下使它变得如此之大，但我一直在使用 CSS max-width: 100%; max-height: 100%; 让它按比例调整大小以适应具有较小屏幕分辨率的计算机。（请记住，这不是“背景”图片）

但是，我真正想要的是，当图像保持当前大小时，仅调整图像大小会在用户的浏览器中创建一个水平滚动条。但是，如果它只会制作一个垂直滚动条，我希望它不调整图像的大小，这样它就可以尽可能大（原因是我觉得水平滚动不像垂直滚动那样专业，因为大多数网站都有垂直滚动）。

有没有办法通过 CSS 来实现这一点，或者我需要 Javascript 吗？如果我需要 javascript，请拼出代码，因为我完全没有使用 javascript 的经验，谢谢！

【问题讨论】：

请创建一个 JSfiddle 来演示问题，我不确定我是否理解正确。
请记住，Java 不是 JavaScript。
@NielsKeurentjes 据我了解，他只想在图像与两侧重叠的情况下调整大小（从而创建水平滚动条）。垂直滚动条就可以了。

标签： javascript image browser resize resolution

【解决方案1】：

只需删除max-height: 100%，只留下max-width: 100%。

Demo

【讨论】：

【解决方案2】：

img {
    max-width: 100%;
    height: auto;
}

【讨论】：

不需要height: auto;。