更多文章可关注我的个人博客:https://seven777777.github.io/myblog/
在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录一下具体的实现方法和应用场景。
一、如何实现
其实关于实现元素的固定宽高比,思路很简单,就是在于找到设置宽高的一个固定基准。关于这个基准是什么,我们其实可以很容易的找到。
其实,最先能够联想到的是图片元素它本身的等比缩放特性,通过固定一边,讲另一边设置为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)
如下图:一个常规的页面,头+侧边导航栏+内容区域(自适应宽度),现在的需求是:右侧列表一行固定排列三个,依次往下排,每个item可以随右侧宽度的变化而等比缩放。
这里再将item细分成两种布局形式,分别是下面的方案一和方案二
1、方案一
这种方案相对较简单,主要就是设置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>
效果如下:
2、方案二
这种方案就是需要稍微做一些变通
方案说明:盒子本身是宽度自适应的,但高度需要根据内部的图片变化来响应,假设图片的宽高比是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实现固定宽高比响应式布局的全部内容了,如果还有其他方案,或是文中有分析不正确的地方,可以评论跟我交流哦~
欢迎关注的我的个人公众号【搴芳拾梦】