【CSS】一行三个盒子每个盒子都是16:9

padding-top 属性接受百分比值时,其百分比是基于父元素的宽度来计算的,而不是自身元素的宽度
aspect-ratio 更方便，但存在兼容性问题

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
      
      
        outline: 1px solid #000;
      }
      .wrap {
      
      
        display: flex;
      }
      .box {
      
      
        flex: 1;
      }
      .container {
      
      
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        /* aspect-ratio: 16 / 9; */ 存在兼容性问题
      }

      .content {
      
      
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        color: black;
      }
      img {
      
      
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box">
        <div class="container">
          <div class="content">
            <img src="https://th.bing.com/th/id/OIP.9Fj56feRuxvZHDPiNDjY9AHaE5?w=262&h=180&c=7&r=0&o=5&pid=1.7" alt="" />
          </div>
        </div>
      </div>
      <div class="box">
        <div class="container">
          <div class="content">
            <img src="https://th.bing.com/th/id/OIP.9Fj56feRuxvZHDPiNDjY9AHaE5?w=262&h=180&c=7&r=0&o=5&pid=1.7" alt="" />
          </div>
        </div>
      </div>
      <div class="box">
        <div class="container">
          <div class="content">
            <img src="https://th.bing.com/th/id/OIP.9Fj56feRuxvZHDPiNDjY9AHaE5?w=262&h=180&c=7&r=0&o=5&pid=1.7" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

【CSS】一行三个盒子 每个盒子都是16:9

猜你喜欢

【CSS】一行三个盒子每个盒子都是16:9