通過CSS樣式padding實現(xiàn)固定比例div、圖片布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .image {
          width: 480px;
          position: relative;
          margin-bottom: 20px;
      }
      .image::before {
          content: "";
          display: block;
          padding-top: 40%;
      }
      .image img {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
      }
  </style>
</head>
<body>

<p>固定比例</p>
<div class="image">
  <img src="https://upload-images.jianshu.io/upload_images/12392780-65dcd002e0db4ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>

<p>圖片自身比例</p>
<div>
  <img src="https://upload-images.jianshu.io/upload_images/12392780-65dcd002e0db4ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
</body>
</html>

效果

image.png
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容