一般来说,图片占用的空间取决于其内容,也就是图片到底由多少个像素组成。但这种不加控制的处理方式在小尺寸窗口中会导致问题。如果窗口太小,图片就会撑开所在的栏,挤掉其他元素,使布局混乱。
1,把图片的宽度限定为其容器的最大宽度即把 max-width 设为 100%。这里的100%相对的是元素所在的容器。设置后,图片要么显示为自己的实际大小,要么扩张到容器的边界为止。
left
right
2,给图片周围加上外边距
如果想要给图片周围加上一点外边距,必须给 margin-left 和 margin-right 设定百分比值,而且要保证加上max-width后等于100%(不能超过)
img {
max-width:90%;
margin-left: 5%;
margin-right: 5%;
}
【css3 动画】CSS3 流式图片的设置,避免图片撑开所在的容器(附样例)
http://m.bbyears.com/flash/91326.html
推荐访问:css3选择器 css3新特性