html - 调整大小时保持 div 纵横比

Question

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

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

当量。如果我想要一个类 foo 的 div 具有宽高比 2:1 我将有一些看起来像这样的 css。

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

在这种情况下，数学 (height/width)*100 = percentage (2/1)*100 = 50%。如果您想要一个纵横比为 16:9 的 div，则数学公式为 (9/16)*100 = 56.25% 等

这以前对我有用，但现在不行了。我有以下 fiddle这样你就明白我的意思了。

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

Answer 1

检查这个例子:

/*
 * 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