CSS实现元素固定宽高比

最新推荐文章于 2024-06-04 10:31:30 发布

guxin_duyin

最新推荐文章于 2024-06-04 10:31:30 发布

阅读量4.2k

点赞数 2

分类专栏： HTML+CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/guxin_duyin/article/details/126166847

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

概要

最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况，简而言之就是元素的宽度是随浏览器而变化，元素的高度是随元素的宽度变化的。

实现方式一：使用`aspect-ratio`属性

原理

使用css属性aspect-ratio指定宽高比

使用

aspect-ratio 的语法格式如下：

aspect-ratio: <widtu-ratio>/<height-ratio>

代码实现

html代码如下：

<body>
    <div class="container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div> 
    </div>
</body>

css代码如下:

* {
          padding: 0;
           margin: 0;
       }

       .container {
           display: grid;
           grid-template-columns: repeat(5, 1fr);
           row-gap: 20px;
           column-gap: 20px;
           padding: 20px;
       }

       .card {
           aspect-ratio: 1;
           background-color: red;
       }

实现效果

card元素宽高比为1:1
在这里插入图片描述

优缺点

优点： 实现简单,便于理解,且没有额外增加dom层级
缺点： 浏览器兼容性不太好,Chrome88或者Edge88或者Firefox89以上才支持

实现方式二：使用`padding-bottom`属性

原理

垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的

代码实现

html:

<body>
    <div class="container">
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
        <div class="card-wrapper">
            <div class="card"></div>
        </div>
    </div>
</body>

css:

* {
            padding: 0;
            margin: 0;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            row-gap: 20px;
            column-gap: 20px;
            padding: 20px;
        }

        .card-wrapper {
            height: 0;
            padding-bottom: 100%;
            overflow: hidden;
            background-color: blue;
        }

        .card {
            padding-bottom: 100%;
            background-color: red;
        }