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

Question

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

我创建了一个相当大的图像（800x1000像素），以显示在我的网站中心。我考虑到大屏幕分辨率这么大，但我一直在使用CSS max-width: 100%; max-height: 100%; 按比例调整大小以适应具有较小屏幕分辨率的计算机。 （请记住，这是不“背景”图片）

但是，我真正喜欢的是，当图像调整大小仅时，将其保持为当前大小会在用户的浏览器中创建一个水平滚动条。但是，如果只生成一个垂直滚动条，我希望不调整大小图像，这样它就可以尽可能大（原因是我认为水平滚动看起来比垂直滚动更不专业，因为大多数网站都有垂直滚动。

有没有办法用CSS完成这个或者我需要Javascript吗？如果我需要javascript，请拼写代码，因为我完全没有使用javascript的经验，谢谢！

Answer 1

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

Demo

Answer 2

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