如何使用css / html使图像可扩展

时间:2011-10-24 19:45:36

标签: css responsive-design

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

请注意: 我宁愿不必隐藏溢出,如果我是正确的,只要它变得很大就会关闭图像(如果我错了,请纠正我)

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

但这个问题似乎是我无法相信别人没有遇到的问题,所以我希望有人可以帮我找出解决方案。请帮助,请...这是在强调我:(

3 个答案:

答案 0 :(得分:11)

设置img标签的样式:

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我正在开展这样的项目,我使用

img { width: 100%; }

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

我理解您对图像扭曲到一定大小的担忧,但对我来说,缩放的能力在这里是最重要的。我创建了这些图像,使它们看起来最适合我的目标受众。

如果以最大尺寸创建图像,希望它们看起来清晰,那么它们也应该缩小,如果带宽有问题,请注意文件大小。