如何使用css/html实现图像缩放

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

注: 我宁愿不必隐藏溢出，如果我是正确的，那么当图像变大时，只需将其切掉（如果我在这里错了，请纠正我）

将高度/宽度设置为max/min似乎也不是一个理想的解决方案

---

但这个问题似乎是我不敢相信别人没有遇到过的，所以我希望有人能帮我找到解决办法。请帮助，请……这让我很紧张：（

尝试只设置高度或宽度，以对您更重要的为准。如果您同时设置两个，浏览器将遵循您的规则。如果您只设置宽度，浏览器将相应地缩小高度。

设置img标记的样式：

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

---

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

我也在处理类似的项目，我使用了

img { width: 100%; }

然后确保在每个图像周围相应地调整div的大小

我理解您对图像在一定尺寸下失真的担忧，但对我来说，缩放能力在这里是最重要的。我创建图像是为了让它们看起来最适合我的目标受众

---

如果您创建的图像大小最大，您希望它们看起来清晰，它们也应该缩小，如果带宽有问题，请注意文件大小。

如果您可以向我们展示您的站点示例，这将更容易帮助您。根据图像的不同，它们相当容易处理。但是在某些情况下，您必须使用mult我可以使用不同的图像（或根据屏幕分辨率或元素宽度移动的精灵）。你能给我们提供一些你的代码吗？这可能有助于了解为什么某些东西不起作用。