图片包裹自适应测试
作者：互联网
Demo1:
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>图片包裹测试A</title>
6 <style type="text/css">
7 .outerbox {
8 background-color: white;
9 padding: 5px;
10 border: solid 1px grey;
11 display: inline-block;
12 -moz-box-shadow: 2px 2px 5px #333333;
13 -webkit-box-shadow: 2px 2px 5px #333333;
14 box-shadow: 2px 2px 5px #333333;
15 }
16 .insidebox {
17 height: 200px;
18 width: 160px;
19 text-align:center;
20 position:relative;
21 }
22 .man{
23 position:relative;
24 top:82%;
25 text-align:center;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="outerbox">
31 <div class="insidebox" style="background-size:100% 100%;background-image:url(images/male.png)"><span class="man">马哈哈</span></div>
32 </div>
33 </body>
34 </html>
Demo2:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片包裹测试B</title>
<style type="text/css">
:root{
--w:160px;
--h:260px;
}
.outerbox{
background-color:white;
padding:5px;
border:solid 1px grey;
width:var(--w);
height:var( --h);
}
.outerbox img{
width:var(--w);
height:var( --h);
}
</style>
</head>
<body>
<div class="outerbox">
<img src="images/female.png" style="background-size:100% 100%;background-image:url(images/male.png)" />
</div>
</body>
</html>
标签：box,测试,2px,height,333333,包裹,5px,var,图片 来源： https://www.cnblogs.com/exesoft/p/10682516.html