javascript - 调整图像大小以适应较小的浏览器

Question

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

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

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

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

Answer 1

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

演示

Answer 2

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