div 背景放图和直接放图区别

最新推荐文章于 2020-03-09 13:51:32 发布

转载最新推荐文章于 2020-03-09 13:51:32 发布 · 184 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=h1a0jakhkjkj&title=div+%E8%83%8C%E6%99%AF%E6%94%BE%E5%9B%BE%E5%92%8C%E7%9B%B4%E6%8E%A5%E6%94%BE%E5%9B%BE%E5%8C%BA%E5%88%AB

前端专栏收录该内容

241 篇文章

订阅专栏

本文详细介绍了如何使用CSS的不同属性来控制背景图片的尺寸，包括'contain'、'cover'以及百分比设置，展示了这些属性如何适应不同大小的div元素。

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