CSS实现固定宽高比响应式布局（附实例分析）

更多文章可关注个人我的博客：https://seven777777.github.io/myblog/

在平常开发过程当中，有一些前端业务场景可能须要让元素在尺寸变化的同时，保证宽高比不变，因此在此记录一下具体的实现方法和应用场景。

1、如何实现

其实关于实现元素的固定宽高比，思路很简单，就是在于找到设置宽高的一个固定基准。关于这个基准是什么，咱们其实能够很容易的找到。

其实，最早可以联想到的是图片元素它自己的等比缩放特性，经过固定一边，讲另外一边设置为auto，就能轻易的实现，可是这种方式有不少局限性，运用到实际复杂的业务布局会有不少短板，因此不推荐，文中也再也不赘述。

主要介绍的是下面两种思路

1.vw

相对于视口的宽度，视口被均分为100单位的vw

vw,vh是css3新加的属性，目前兼容性仍是不错的，
是基于视口的长度单位，即便父元素没有设定高度，也依然可以获取到。

经过这个基准，咱们在进行布局的时候，将宽高都基于这个单位来设置，就能很容易的实现宽高等比缩放的效果。

代码以下：

<!--假设咱们盒子的宽高比固定是2:1-->
.box1{
    width: 20vw;
    height: 10vw;
    background-color:aquamarine;
}

但因为咱们实际开发的应用场景大多都不是基于整个视口来布局，会有侧边栏，或是一些其余的元素，使得实际咱们的布局的盒子只是占整个视口的一部分，因此在将设计师给到的设计图转换成vw布局时，须要进行一些计算，虽然都是一些简单的计算，但也是增长了开发成本。因此相比来讲，我更推荐下面一种方法。

2.padding-top的百分比是基于元素宽度的百分比（推荐）

根据这个特性也可以很容易的实现效果

margin 和 padding 的百分比设置都是基于父元素的百分比，能够触类旁通，根据实际状况，灵活的使用

.box2{
    width: 20%;
    height: 0;
    padding-top: 10%;
    background-color: brown;
}

以上两种能够实现一样的效果，以下：

2、如何应用

掌握了基本原理后，就到了应用阶段，能够经过下面一个示例，来检验一下实际应用的效果

实例(使用上述方法2)

以下图：一个常规的页面，头+侧边导航栏+内容区域（自适应宽度），如今的需求是：右侧列表一行固定排列三个，依次往下排，每一个item能够随右侧宽度的变化而等比缩放。

这里再将item细分红两种布局形式，分别是下面的方案一和方案二

一、方案一

这种方案相对较简单，主要就是设置item的固定宽高，再在盒子里增长其余元素便可，直接代码：

<!--这里的盒子宽高比咱们假设为3:1-->

// css
.item{
    width: 33%;//由于每行显示三个，因此设置宽度为33%，剩下的1%做为间距
    height: 0;
    padding-top: 11%;//比例为3:1，根据宽度能够计算出高度为11%
    margin-right: 0.5%;
    margin-bottom: 0.5%;
    box-sizing: border-box;
    border: 1px solid #999999;
    position: relative;
}
.item:nth-child(3n){
    margin-right: 0;
}
// 由于item的高度是被padding撑起来的，因此内部的布局须要经过绝对定位，增长一个盒子来盛放
.itemInner{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('./images/testpic01.jpg') center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column-reverse;
}
.innerTxt{
    margin: 0;
    padding: 0 20px;
    font-size: 14px;
    line-height: 2;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
}

// html
<div class="testMain">
    <div class="item">
        <div class="itemInner">
            <p class="innerTxt">这是一段测试标题</p>
        </div>
    </div>
    <div class="item">
        <div class="itemInner">
            <p class="innerTxt">这是一段测试标题</p>
        </div>
    </div>
    ...
</div>

效果以下：

二、方案二

这种方案就是须要稍微作一些变通

方案说明：盒子自己是宽度自适应的，但高度须要根据内部的图片变化来响应，假设图片的宽高比是4:3

代码以下：

// css
.item2{//这一部分不须要设置宽高比，只要设置好宽度，高度可让其根据内部图片高度自适应
    width: 33%;
    margin-right: 0.5%;
    margin-bottom: 0.5%;
    box-sizing: border-box;
    border: 1px solid #999999;
    position: relative;
}
.item2:nth-child(3n){
    margin-right: 0;
}
.item2Inner{
    padding: 12px;
    display: flex;
}
// 图片元素再根据上面的方法进行固定宽高比设置
.item2Inner-pic{
    width: 40%;
    height: 0;
    padding-top: 30%;
    background: url('./images/testpic01.jpg') center center no-repeat;
    background-size: cover;
    flex-shrink: 0;
}
.item2Inner-main{
    flex: 1;
    margin-left: 10px;
}
.item2Inner-main-title{
    font-size: 14px;
    color: #333;
    line-height: 2;
}
.item2Inner-main-txt{
    font-size: 12px;
    color: #666;
    line-height: 2;
}

// html
<div class="testMain">
    <div class="item2">
        <div class="item2Inner">
            <div class="item2Inner-pic"></div>
            <div class="item2Inner-main">
                <p class="item2Inner-main-title">标题</p>
                <p class="item2Inner-main-txt">这是一段测试文字</p>
            </div>
        </div>
    </div>
    <div class="item2">
        <div class="item2Inner">
            <div class="item2Inner-pic"></div>
            <div class="item2Inner-main">
                <p class="item2Inner-main-title">标题</p>
                <p class="item2Inner-main-txt">这是一段测试文字</p>
            </div>
        </div>
    </div>
    ...
</div>

效果以下：

以上两种方案完整代码可点击 ☞ 这里 查看

以上就是关于CSS实现固定宽高比响应式布局的所有内容了，若是还有其余方案，或是文中有分析不正确的地方，能够评论跟我交流哦~

欢迎关注的个人我的公众号【搴芳拾梦】