在页面中我们常常希望放在div里面的图片和div的大小一致，一般情况有如下：
1.在div里面放置一张比div大的图片设置为背景，让背景图片和div等宽高的方法是加一个round，如下代码
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 div{
8 width: 200px;
9 height: 200px;
10 background: url("imgs/a.pig") round; //加round，图片会自适应div的宽高来缩放
11 }
12 </style>
13 </head>
14 <body>
15 <div></div>
16 </body>
17 </html>
2.div里面放置img标签，图片比div宽高，让img适应div的宽高，方法如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid red;
}
img{
width: 100%; //方法一：给图片设置宽高为100% 方法二：将图片的宽高设置成div的宽高
height: 100%;
}
</style>
</head>
<body>
<div ><img src="img/page1-img1.png" alt=""/></div>
</body>
</html>
时间： 2024-09-30 16:00:54