这是我目前所拥有的渲染 800 x 534 像素图像的方法。到目前为止，我已经为屏幕尺寸较小的用户正确缩放，并且我能够为较大的屏幕尺寸设置最大图像尺寸。
我只是想知道如何修改此代码以使其适用于尽可能多的浏览器，如果有一个 innerwidth 或 innerheight 选项我可以在不依赖 javascript 的情况下使用，那么我会去做。
我问的原因是因为当我在小屏幕上缩放图像时，无论我使用哪种浏览器，我仍然需要滚动页面大约与浏览器装饰高度相同的像素数，我想避免滚动查看整个图像的要求。
<html>
<head>
<style>
IMG {width: 100%;height: auto; max-width:800px; max-height:534px;}
</style>
</head>
<body>
<img src="image.jpg" width=800 height=534>
</body>
</html>
最佳答案
试试这个 https://jsfiddle.net/2Lzo9vfc/10/
CSS
img {
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
如果你的图像是固定大小的，找到它滚动的窗口大小，并使用媒体查询来修复它。
关于html - 根据屏幕大小调整图像大小并使其与所有浏览器兼容，无需滚动或 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33331930/