如何使用 css/html 制作可缩放的图像答案

【问题标题】：how can I make an image scale-able using css/html如何使用 css/html 制作可缩放的图像
【发布时间】：2011-12-14 10:18:41
【问题描述】：

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

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

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

但是这个问题似乎是我不敢相信其他人没有遇到过，所以我希望有人能帮我想出一个解决方案。请帮忙，拜托……这让我很紧张:(

【问题讨论】：

如果您可以向我们展示您网站的示例，我们会更容易为您提供帮助。根据图像，它们相当容易处理。然而，在某些情况下，您必须拥有多个不同的图像（或根据屏幕分辨率或元素宽度变化的精灵）。

标签： css responsive-design

【解决方案1】：

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

【讨论】：

你能提供一些你的代码吗？了解为什么某些事情不起作用可能会有所帮助。

【解决方案2】：

为 img 标签设置样式：

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

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

【讨论】：

【解决方案3】：

我也在做这样的项目，我用过

img { width: 100%; }

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

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

如果您以希望它们看起来清晰的最大尺寸创建图像，它们也应该按比例缩小，如果带宽是一个问题，请注意文件大小。

【讨论】：