12. 保持元素宽高比

最新推荐文章于 2024-08-09 21:30:00 发布

LBJ辉

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量176

点赞数 3

分类专栏： code 文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_36081714/article/details/137348833

版权

code 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>保持元素宽高比</title>
    <style>
      .item {
        background: #f40;
        width: 50%;
        margin: 0 auto;
        /* height: ?; */
        /* aspect-ratio: 4/3; 有兼容性问题 */
      }
      .inner {
        width: 100%;
        /* padding和margin的百分比的像素基准是其父元素的宽度。 */
        padding-bottom: 75%;
        height: 0;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="inner"></div>
    </div>
  </body>
</html>