解决 图片在div中等比例缩放问题 (未解决:图片比例小于盒子模型时不会自动填充)

2023-01-18 10:42:01 买帖  | 投诉/举报

篇首语:本文由小编为大家整理,主要介绍了解决 图片在p中等比例缩放问题 (未解决:图片比例小于盒子模型时不会自动填充)相关的知识,希望对你有一定的参考价值。


如题,该方案仅支持对图片等比例缩放。
本文附件地址: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 <p class="column">24 <p style="padding-top:62.5%;background: url("loading.jpg") no-repeat;background-size:cover;background-position:center;"></p>25 </p>26 <p style="width: 400px;height: 200px;" class="column">27 <p style="padding-top:62.5%;background:url("loading.jpg") no-repeat;background-size:cover;background-position:center;"></p>28 </p>29 30 <!-- 案例二 -->31 <p class="column">32 <p style="padding-top:46.875%;background: url("pannel-01.jpg") no-repeat;background-size:cover;background-position:center;"></p>33 </p>34 <p style="width: 400px;height: 200px;" class="column">35 <p style="padding-top:46.875%;background:url("pannel-01.jpg") no-repeat;background-size:cover;background-position:center;"></p>36 </p>37 38 <!-- 案例三 -->39 <p class="column">40 <p style="padding-top:20.0598802%;background: url("pannel-02.jpg") no-repeat;background-size:cover;background-position:center;"></p>41 </p>42 <p style="width: 400px;height: 200px;" class="column">43 <p style="padding-top:20.0598802%;background:url("pannel-02.jpg") no-repeat;background-size:cover;background-position:center;"></p>44 </p>45 </body>46 </html>

 









以上是关于解决 图片在p中等比例缩放问题 (未解决:图片比例小于盒子模型时不会自动填充)的主要内容,如果未能解决你的问题,请参考以下文章