css - 如何使用 css/html 使图像可缩放

Question

我制作了一个完全可扩展的简单网站...除了图像。正文和所有内容、div 都设置为百分比，事实上，我以这种方式设计的目的是练习制作可以缩放到任何屏幕分辨率的网站。除了图像，一切都进行得很顺利，而页面的其余部分随着浏览器的增长或缩小，图像要么溢出要么变小(在浏览器上放大和缩小时)。将图像宽度和高度设置为百分比不起作用，因为将浏览器水平或垂直拉伸(stretch)得太远会导致图像扭曲。

注意:我宁愿不必 overflow hidden ，如果我是正确的，那么当图像变大时就会将其剪掉(如果我在这里错了，请纠正我)

并将高度/宽度设置为最大/最小值似乎也不是理想的解决方案。

但是这个问题好像是我不敢相信别人没有遇到过，所以我希望有人能帮我想出一个解决办法。请帮忙，拜托......这让我很紧张:(

Answer 1

设置 img 标签的样式:

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

现在调整包含图像的元素的大小将导致图像相应地自行缩放。