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

时间：2023-03-10 01:25:28
解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充） 
如题，该方案仅支持对图片等比例缩放。
本文附件地址：https://files.cnblogs.com/files/john69-/background-Img.rar

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="{CHARSET}">

         <title>图片自动化</title>

     </head>

     <style type="text/css">

     .column{

      /*max-width: 1024px;*/

         border: 1px solid red;

         overflow: hidden;

         margin-bottom: 50px;

     }

     </style>

     <body>

     <!--

        padding-top = 宽度/高度 * 100%

     -->

         <!-- 案例一 -->

         <div class="column">

             <div style="padding-top:62.5%;background: url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <div style='width: 400px;height: 200px;' class="column">

             <div style="padding-top:62.5%;background:url('loading.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <!-- 案例二 -->

         <div class="column">

             <div style="padding-top:46.875%;background: url('pannel-01.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <div style='width: 400px;height: 200px;' class="column">

             <div style="padding-top:46.875%;background:url('pannel-01.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <!-- 案例三 -->

         <div class="column">

             <div style="padding-top:20.0598802%;background: url('pannel-02.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

         <div style='width: 400px;height: 200px;' class="column">

             <div style="padding-top:20.0598802%;background:url('pannel-02.jpg') no-repeat;background-size:cover;background-position:center;"></div>

         </div>

     </body>

 </html>