CSS3 - 流式图片的设置，避免图片撑开所在的容器（附样例）

作者：hangge | 2016-01-05 12:09

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

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%;
}

HTML5 / CSS3

CSS3 - 流式图片的设置，避免图片撑开所在的容器（附样例）

全部评论（0）