css3 容器宽高之间的比例怎么写

html-css021

css3 容器宽高之间的比例怎么写,第1张

用js实现一个宽度自适应，高度随着宽度变化而变化的矩形，相信大家肯定都会。无非是js获取一下元素宽度，然后再计算出相应比例的高度，然后赋给元素，但如果要求只用CSS实现呢。

html代码如下，

<div class='container'>

<div class='dummy'></div>

<div class='content'>content</div>

</div>

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

}

有什么问题你可以去《5 1r gb》看看里面的论坛

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

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

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

有两种

1.通过设置viewport参数

2.使用css3中的缩放

两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例，然后进行缩放。但是因为目前手机种类繁多，浏览器种类也很多，所以每种方法各自都有不少的问题。

如果height值是固定不变的，简单，直接设置line-height跟height值一样就行了。

如果height值是动态的，你可以考虑用js获取height的值，然后在设置给对应文字，让它的line-height跟height一样。