解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）
Posted john69-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）相关的知识，希望对你有一定的参考价值。
如题，该方案仅支持对图片等比例缩放。
本文附件地址：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>
以上是关于解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）的主要内容，如果未能解决你的问题，请参考以下文章