如题，该方案仅支持对图片等比例缩放。
本文附件地址：https://files.cnblogs.com/files/john69-/background-Img.rar
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="{CHARSET}">
5 <title>图片自动化</title>
6 </head>
7 <style type="text/css">
8 .column{
9 /*max-width: 1024px;*/
10 border: 1px solid red;
11 overflow: hidden;
12 margin-bottom: 50px;
13 }
14 </style>
15 <body>
16 <!--
17 padding-top = 宽度/高度 * 100%
18
19 -->
20
21
22 <!-- 案例一 -->
23 <div class="column">
24 <div style="padding-top:62.5%;background: url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>
25 </div>
26 <div style='width: 400px;height: 200px;' class="column">
27 <div style="padding-top:62.5%;background:url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>
28 </div>
29
30 <!-- 案例二 -->
31 <div class="column">
32 <div style="padding-top:46.875%;background: url('pannel-01.jpg') no-repeat;background-size:cover;background-position:center;"></div>
33 </div>
34 <div style='width: 400px;height: 200px;' class="column">
35 <div style="padding-top:46.875%;background:url('pannel-01.jpg') no-repeat;background-size:cover;background-position:center;"></div>
36 </div>
37
38 <!-- 案例三 -->
39 <div class="column">
40 <div style="padding-top:20.0598802%;background: url('pannel-02.jpg') no-repeat;background-size:cover;background-position:center;"></div>
41 </div>
42 <div style='width: 400px;height: 200px;' class="column">
43 <div style="padding-top:20.0598802%;background:url('pannel-02.jpg') no-repeat;background-size:cover;background-position:center;"></div>
44 </div>
45 </body>
46 </html>
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-7-17 21:02:17