我制作了一个完全可扩展的简单网站……除了图像。正文和所有内容，div 设置为百分比，实际上我设计这种方式的目的是练习制作可以扩展到任何屏幕分辨率的网站。除了图像，一切都很顺利，而页面的其余部分随着浏览器的增加或缩小，图像要么溢出要么变小（在浏览器上放大和缩小时）。将图像宽度和高度设置为百分比不起作用，因为将浏览器水平或垂直拉伸得太远会导致图像变形。
注意：我宁愿不必隐藏溢出，如果我是正确的，那只会在图像变大时将其切断（如果我在这里错了，请纠正我）
并将高度/宽度设置为最大/最小似乎也不是一个理想的解决方案。
但是这个问题似乎是我不敢相信其他人没有遇到过的，所以我希望有人能帮我想出一个解决方案。请帮忙，拜托……这让我很紧张:(
为 img 标签设置样式：
img {
height: auto;
max-width: 100%;
}
现在调整包含图像的元素的大小将导致图像相应地缩放。
尝试仅设置高度或宽度，以对您更重要的为准。如果两者都设置，浏览器将遵循您的规则。如果你只是设置宽度，浏览器会相应地缩小高度。
我也在做这样的项目，我用
img { width: 100%; }
以及然后确保相应地调整每个图像周围的 div 大小。
我理解您对图像在一定尺寸下失真的担忧，但对我来说，缩放能力在这里最为重要。我创建了这些图像，以便它们看起来最适合我的目标受众。
如果您以希望它们看起来清晰的最大尺寸创建图像，它们也应该按比例缩小，如果带宽是一个问题，请注意文件大小。