如何使用CSS/HTML使图像具有可缩放性

Question

我做了一个简单的网站，它完全可扩展...除了图片。正文和所有div都设置为百分比，事实上我设计这种方式的目的是练习制作适应任何屏幕分辨率的网站。一切都很顺利，除了图片，当页面其余部分随着浏览器变大或缩小时，图片要么溢出要么变得很小（在浏览器中缩放时）。将图像的宽度和高度设置为百分比不起作用，因为将浏览器水平或垂直拉伸太远会导致图像失真。

注意： 我不想隐藏溢出，如果我正确的话，那只会在图像过大时截断它（如果我在这里说错了，请纠正我）

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

但这个问题似乎是我无法相信其他人没有遇到过的问题，所以我希望有人能帮助我找到解决方案。拜托了，拜托了...这让我很紧张 :(

- ThisBetterWork

---

如果您能展示您网站的一个例子，那么我们帮助您会更容易。根据图片，它们相当容易处理。然而，在某些情况下，您必须拥有多个不同的图像（或者是基于屏幕分辨率或元素宽度移动的精灵）。 - CBRRacer

Answer 1

对图片标签进行样式设置：

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

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

- Dave Snyder

Answer 2

我也在做一个类似的项目，我使用了：

img { width: 100%; }

同样也确保根据每个图像调整 div 的大小。

我理解您对图像在某些尺寸上会失真的担忧，但对我来说，能够按比例缩放是最重要的。我创建了这些图像，以便它们在我的目标受众的尺寸下表现最佳。

如果您将图像创建为您想要它们呈现清晰的最大尺寸，则它们也应该可以缩小，只要注意文件大小是否成为问题。

- Emily P.

Answer 3

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

- jp14

---

你能提供一些你的代码吗？这可能有助于了解为什么某些事情无法正常工作。 - jp14