调整图像大小以适合较小的浏览器

Question

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

我创建了一个相当大的图像（800x1000px）以显示在我的网站中心。 考虑到大屏幕分辨率，我把它做得太大了，但是我一直在使用CSS max-width: 100%; max-height: 100%; max-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;
}