web_practice
/
图片大过容器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div:first-of-type{
			float: left;
			width: 500px;
			height: 250px;
			background: pink url(test.jpg) no-repeat;
			/*最长边铺满*/
			-webkit-background-size: cover;
			background-size: cover;
		}
		div:last-of-type{
			float: left;
			width: 500px;
			height: 250px;
			background: pink url(test.jpg) no-repeat;
			/*最短边铺满*/
			-webkit-background-size: contain;
			background-size: contain;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<img src="test.jpg">
</body>
</html>