本文已参与「新人创作礼」活动，一起开启掘金创作之路。

代码

显示图片是一个前端最常见的功能，但是总是写图片适应大小好烦人哦，使用下面的样式，记录留底。

.mydiv的样式是很常见的列表展示用的小图，使用该样式调整自定宽高即可。建议图片的宽高比与div的宽高比大致一致，区别太大神仙也救不了。

body的样式是背景图片展示使用，让页面的背景不再单调~

<html>
<head>
<style>
.my_div{
	width:50%;
	height:50%;
	background: url(background.jpeg) no-repeat center;
	background-size: cover;
	background-color: #CCCCCC;
}

body{
	background: url(background.jpeg) no-repeat center;
	background-size: cover;
	background-color: #CCCCCC;
	background-attachment: fixed;	//如果是要做全屏背景，使用它
}
</style>
</head>

<body>
	<div class="my_div"></div>
</body>
</html>

效果

在这里插入图片描述

图片自适应平铺

代码

效果