原始图片：
知识储备
一：background-size:cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.img-box {
width: 300px;
height: 200px;
background-image: url(./demo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border: 1px solid red;
}
</style>
<body>
<div class="img-box">
</div>
</body>
</html>
二：background-size:contain
把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。
background-size: cover; 修改为： background-size: contain;
本文详细介绍了CSS中两种背景图设置方法：使用background-size:cover让背景图完全覆盖背景区域；使用background-size:contain使背景图按比例填充，且不产生变形。通过具体HTML示例代码展示了这两种设置方式的效果。
扫一扫
6351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
