图片在行内元素的时候可以实现页面的百分比缩小和放大，但是background导入的时候如何实现？
来源：2-10 作业题
怒焰狂暴
2020-02-10 13:07:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.con{
width:100%;
height:700px;
}
img{
width:25%;
height:50%;
float:left;
}
</style>
</head>
<body>
<div class="con">
<img src="images/b1.jpg"/>
<img src="images/b1.jpg"/>
<img src="images/b1.jpg"/>
<img src="images/b1.jpg"/>
</div>
</body>
</html>
如果图片不在行内元素里显示，放到css中，用background:url()，来导入，如何实现同样的效果呢？
1回答
-
好帮手慕糖
2020-02-10
同学你好，可以使用background-size属性，可以设置背景图片的大小。这个是css3属性，当前还没有学到，会在后面的课程中学习到，可以先了解下。
语法：background-size: length|percentage|cover|contain;
属性值：
（1）length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
（2）percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
（3）cover： 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
（4）contain ：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1