一般来说，图片占用的空间取决于其内容，也就是图片到底由多少个像素组成。但这种不加控制的处理方式在小尺寸窗口中会导致问题。如果窗口太小，图片就会撑开所在的栏，挤掉其他元素，使布局混乱。
1，把图片的宽度限定为其容器的最大宽度
即把 max-width 设为 100%。这里的100%相对的是元素所在的容器。设置后，图片要么显示为自己的实际大小，要么扩张到容器的边界为止。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hangge.com</title>
<style>
* {
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%;
}
</style>
</head>
<body>
<div class="leftColumn">
<div class="colomnContent">
left
</div>
</div>
<div class="rightColumn">
<div class="colomnContent">
right
<img src="sea.jpg"/>
</div>
</div>
</body>
</html>
2，给图片周围加上外边距
如果想要给图片周围加上一点外边距，必须给 margin-left 和 margin-right 设定百分比值，而且要保证加上max-width后等于100%（不能超过）
img {
max-width:90%;
margin-left: 5%;
margin-right: 5%;
}