调整大小时保持div宽高比

问题描述：

我想在浏览器调整大小时保持div的纵横比。调整大小时保持div宽高比

我以前有过这个问题，然后解决方法是使用padding-bottom以百分比。

e.q.如果我想要一个类foo div有长宽比2:1我会有一些CSS看起来像这样。

.foo{ 
    width: 100%; 
    padding-bottom: 50%; 
}

在这种情况下(2/1)*100 = 50%数学(height/width)*100 = percentage。如果你想要一个长宽比为16:9的div，数学是(9/16)*100 = 56.25%等

这对我以前的工作，但现在它没有。我有以下fiddle，所以你可以看到我的意思。

看来.caption-wrap有一个高度，但我不知道它来自哪里。

的额外高度belons到的内容的高度。即内容应该绝对定位，以免影响计算出的高度。 – 2015-02-24 09:11:55

@HashemQolami像[this]（http://jsfiddle.net/hpmu8wh0/2/）？ – 2015-02-24 09:13:48

您是否尝试使用height：0作为.caption-wrap？ – kuba 2015-02-24 09:14:44

答

检查这个例子：

/* 
* Pure CSS aspect ratio with no spacer images or js! :) 
*/ 

body { 
    width: 36%; 
    margin: 8px auto; 
} 

div.stretchy-wrapper { 
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9 */ 
    position: relative; 

    background: blue; 
} 

div.stretchy-wrapper > div { 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 

    color: white; 
    font-size: 24px; 
    text-align: center; 
} 

/* Other aspect ratios to try: 
* 56.25% = 16:9 
* 75% = 4:3 
* 66.66% = 3:2 
* 62.5% = 8:5 
*/

链接dabblet：http://dabblet.com/gist/2590942

调整大小时保持div宽高比

相关推荐