css如何保持div等高宽比
那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。
下面以高宽 2:1 为例,通过2种方式来实现这种效果。
方式一:利用定位实现
.wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%;}.inner{ position : absolute; top : 0; left : 0; right : 0; bottom : 0;}</style><div class="wrapper"> <div class="inner"> 这是内容 </div></div>
说明:其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.
方式二:利用伪元素
<style>.wrapper { background: #ccc; width: 10%;}.wrapper::before { content: ''; padding-top: 200%; float: left;}.wrapper::after { content: ''; display: block; clear: both;}</style><div class="wrapper"> 这是内容</div>
padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度,创建一个响应正方形。 此方法还允许内容正常放置在元素内部。
总结
二种方式实现的效果都一样,大家可以试一下,调整浏览器窗口的大小以查看元素的比例保持不变。
个人推荐使用方法二,这样可以减少div的嵌套。不过方法一的兼容更好
这里推荐一下我的前端技术分享群:731771211,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。
点击:加入
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341