html如何防止内部撑开,CSS3 流式图片的设置，避免图片撑开所在的容器（附样例）...

CSS3 流式图片效果在许多的图片网站中我们有看到了，下文我们一起来看一篇关于CSS3 流式图片的设置，避免图片撑开所在的容器(附样例)例子，具体的一起来看看。

一般来说，图片占用的空间取决于其内容，也就是图片到底由多少个像素组成。但这种不加控制的处理方式在小尺寸窗口中会导致问题。如果窗口太小，图片就会撑开所在的栏，挤掉其他元素，使布局混乱。

1，把图片的宽度限定为其容器的最大宽度

即把 max-width 设为 100%。这里的100%相对的是元素所在的容器。设置后，图片要么显示为自己的实际大小，要么扩张到容器的边界为止。

hangge.com

* {

margin: 0px;

padding: 0px;

}

body{

background-color:#EFEFEF;

}

.leftColumn {

width: 31.3%;

margin-left: 2%;

margin-right: 2%;

float: left;

background-color:yellow;

}

.rightColumn {

width: 62.7%;

margin-right: 2%;

float: left;

background-color:#7FFF9B;

}

.colomnContent {

border: 1px solid gray;

height:210px;

}

img {

max-width:100%;

}

left

right

            

2，给图片周围加上外边距

如果想要给图片周围加上一点外边距，必须给 margin-left 和 margin-right 设定百分比值，而且要保证加上max-width后等于100%(不能超过)

img {

max-width:90%;

margin-left: 5%;

margin-right: 5%;

}