<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>
