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

Resizing images to fit smaller browsers

本文关键字：浏览器图像调整更新时间：2023-09-26

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

我创建了一个相当大的图像(800x1000px)显示在我的网站的中心。我用大屏幕分辨率把它做得这么大，但我一直在使用CSS max-width: 100%; max-height: 100%;来按比例调整它的大小，以适应屏幕分辨率较小的计算机。(请记住这是而不是一个"背景"图像)

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

是否有一种方法来完成这与CSS还是我需要Javascript?如果我需要javascript，请拼出代码，因为我绝对没有javascript的经验，谢谢!

去掉max-height: 100%，只留下max-width: 100%。

演示

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