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

时间：2023-05-09 17:21:04 买帖  | 投诉/举报

篇首语：本文由小编为大家整理，主要介绍了解决 图片在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中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）的主要内容，如果未能解决你的问题，请参考以下文章