资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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;
}


    
        这是内容
    

说明：其中奥妙就在于padding-bottom:20%, padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

方式二：利用伪元素



    这是内容

padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度，创建一个响应正方形。 此方法还允许内容正常放置在元素内部。

总结

二种方式实现的效果都一样，大家可以试一下，调整浏览器窗口的大小以查看元素的比例保持不变。

个人推荐使用方法二，这样可以减少div的嵌套。不过方法一的兼容更好

这里推荐一下我的前端技术分享群：731771211，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击： 加入


网站题目：css如何保持div等高宽比
浏览地址：http://www.cdkjz.cn/article/jpgcgg.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
西信服务器托管服务器托管成都网站优化攀枝花网站建设服务器租用谷歌推广和正源建设成都电商网站建设方案网络推广公司成都移动服务器托管

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图