美文网首页
css布局--等宽高比

css布局--等宽高比

作者: 怪兽别跑biubiubi | 来源:发表于2018-03-23 15:00 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>等宽高比</title>
      <style>
        .box {
          width: 500px;
          background: #333;
          color: #fff;
        }
        .box::before {
          content: '';
          padding-top: 100%;
          float: left;
        }
        .box::after {
          content: '';
          display: block;
          clear: both;
        }
      </style>
    </head>
    <body>
      <div class="box">给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。</div>
    </body>
    </html>

    相关文章

      网友评论

          本文标题:css布局--等宽高比

          本文链接:https://www.haomeiwen.com/subject/vefxcftx.html