通过CSS样式padding实现固定比例div、图片布局

作者: 初心不改_0055 | 来源:发表于2023-05-14 18:25 被阅读0次

<!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://img.haomeiwen.com/i12392780/65dcd002e0db4ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>

<p>图片自身比例</p>
<div>
  <img src="https://img.haomeiwen.com/i12392780/65dcd002e0db4ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="">
</div>
</body>
</html>