码迷,mamicode.com
首页 > 其他好文 > 详细

get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。

时间:2014-11-13 14:15:38      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   使用   sp   

 

设置宽高比在很多时候是有用的。

下面的栗子,我们设置一个容器的宽高比为16:9

//HTML代码片段
<div class="container">
      <div class="wrapper">
         <div class="content">content</div>
      </div>
    </div>
//css 代码
           div{
              border: 1px solid green;
            }
      .container{ width:400px; }
            .wrapper{
              position:relative;
              padding-top:25px;
              padding-bottom:56.25%;   // 16/9 = 0.5625;
              height:0;
              border: 1px solid red;
            }
            .content{
              position:absolute;
              top: 0;
              left: 0;
              width: 100%;
              height:100%;
              background:gray;
            }
            

我们看到先设置.container容器宽度为400.这个值可以使任意的宽度,也可以是一个百分比。

.wrapper容器设置了 padding-bottom为56.25% 。 这个百分比是16/9的值,这里设置padding-bottom为父容器.container的宽度的百分之56.25.

另外。设置padding-top 为25px,这里在实际中也比较有用。 比如我们要设置一个视频播放器播放界面的宽高比为16:9。我们还希望播放界面上面留下25px的高度来放置播放控制的按钮。

通过padding-bottom和padding-top撑起了.wrapper容器的高度。并且设置height为0;

接下来是.comtent元素。我们设置这个元素绝对定位。top:0,left:0; width:100%;height:100%;因为它的父元素.wrapper的宽度和高度已经成比例了,所以使用width:100%;height:100%;就让content容器达到目的了。通过改变.container的宽度,.content元素的高宽也能成比例的改变。

结果

bubuko.com,布布扣

.container元素--盒模型

bubuko.com,布布扣

.wrapper元素--盒模型

bubuko.com,布布扣

.content元素--盒模型

bubuko.com,布布扣

 

这里.container元素的宽度可以使用百分比来设置,这在很多时候非常有用。

get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。

标签:style   blog   http   io   color   ar   os   使用   sp   

原文地址:http://www.cnblogs.com/cheerfulCoder/p/4094746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!