响应式网页设计和调整图像大小

Question

Repsonsive网页设计在大多数html元素上运行得很好,除了图像.我觉得它很乱.调整视口大小时,不能在图像上使用调整大小百分比,因为它将采用父元素的宽度和高度.你需要为图像设置固定的宽度和高度......或者我错过了什么？

那么你究竟如何做一个响应式设计,其中包含容器元素/父级将超出其原始宽度并缩小到其原始宽度以下的图像？

谢谢

Answer 1

响应式设计中完成的事情是在图像和其他一些元素的css中设置它:

img, embed, object, video {
max-width:100%;
    height:auto;
}

然后在你的html中,图像只占用它的容器大小.

您不需要设置图像大小,只需让它自己增长/缩小.