频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS实现宽高成比例缩放
2014-09-01 08:35:33      个评论      
收藏   我要投稿
 用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会。无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢。

 

      html代码如下,

 

<p class='container'>

    <p class='dummy'></p>

    <p class='content'>content</p>

</p>

     css代码如下,

 

复制代码

.container{

    background-color: silver;

    width:100%;

    position:relative;

    display: inline-block;

}

.dummy{

    margin-top: 100%;

}

.content{

    position:absolute;

    left:0;

    right:0;

    top:0;

    bottom: 0;

}

 

 

    接下来分析一下,究竟是如何实现的。首先容器container块内包含了两个p,一个是dummy,这个纯粹是为了实现缩放效果加的,另一个content里面放的是我们真正想要展现的内容。其实原理也很简单,大家都知道p是块元素,它默认就是占一行,宽度本来就是自适应的,所以我们需要做的是让它的高度能随宽度改变。在不使用js的前提下,靠的就是前面提到的dummy那个块来实现,dummy只设置了一个css属性,margin-top:100%,相信大家都反应过来了。因为容器宽度已经在那儿了,通过dummy块的margin-top来把整个的高度撑得和宽度一样,当容器宽度改变时,dummy的位置也会改变,进而容器高度就跟着发生了变化。

 

    但是,还是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词大家肯定都不是第一次听到,大家肯定都处理过因为子元素浮动导致父元素高度塌陷,所以这里采用的方法也是类似清除浮动的方法,设置父元素display:inline-block或overflow:hidden。这里说个题外话,不知道大家在使用这两种方法清除浮动的时候有没有过疑问,为什么给父元素这样设置之后就能把父元素高度撑起来呢,准确的原理解释起来有点复杂。可以简单的理解为,当子元素脱离文档流时,父元素不知道子元素的存在,所以导致高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时,迫使父元素去检查自己内部有哪些子元素,而这时候就发现了之前absolute定位的子元素,所以高度就撑开了。

 

    这里给dummy块设置margin-top:100%,出来的是个可自适应缩放的正方形,如果需要长方形只需要更改此值即可,比如需要4:3的长方形,则应设为margin-top:75%。

点击复制链接 与好友分享!回本站首页
相关TAG标签 高成 比例
上一篇:css @media的理解
下一篇:CSS之盒子模型
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站