div 背景放图和直接放图区别_div里面放图片和style里面放图片区别-CSDN博客

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 10px;
				padding: 10px;
				
			}
                    /*背景插入图片，contain设定使图片在div框中完全显示，不受div框大小影响*/
			.a{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				background-image: url(tupian/y1.png);
				background-repeat: no-repeat;
				background-size: contain;
			}
			.b{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				background-image: url(tupian/y1.png);
				background-repeat: no-repeat;
				background-size: contain;
			}
                        /*背景图片设定，cover  100% 图片横向符合div框大小，固定比例变化图片，可能显示不全*/
			.c{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				background-image: url(tupian/y1.png);
				background-repeat: no-repeat;
				background-size: cover;
			}
			.d{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				background-image: url(tupian/y1.png);
				background-repeat: no-repeat;
				background-size: 100%;
			}
			.e{
				width: 200px;
				height: 100px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b">
			
		</div>
		<div class="c"></div>
		<div class="d"></div>
		<div class="e">
			<img src="tupian/y1.png" />
		</div>
	</body>
</html>