使用CSS保持div的长宽比[重复]

Question

这个问题已经在这里有了答案：

• 使用CSS 22答案 保持div的长宽比
• 如何强制响应性元素保持其长宽比[重复] 2个答案

我正在尝试创建一个div并使用CSS将其长宽比保持在16：9。 我进行了一次Google搜索，并很快发现了这一点： 如何保持纵横比 。 所以我尝试自己做，但是遇到了问题。 当我在其中添加文字时，该比例会发生变化，不再是16：9的比例。

的jsfiddle

当您删除所有li's ，则该比率是正确的。 即使在其中添加文本，如何保持长宽比？

代码段：

 div { width: 70%; } ul { padding-bottom: 56.25%; background: green; } 

 <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> 

Answer 1

1. 使用您提供的链接中所述的padding技术，构建具有所需长宽比的div。
2. 使该div相对，绝对或固定地定位，并向其中添加一个子元素。 使此子级定位为绝对位置，并将top ， bottom ， left和right设置为0。该子级始终具有外部div相同的纵横比，无论其内容是什么。
3. 如果需要，请在内部元素上设置overflow:hidden 。

HTML：

<div class="outer">
    <ul class="inner">
        <li>List items go here</li>
        <li>...</li>
    </ul>
</div>

CSS：

.outer {
    padding-bottom: 56.25%; // 9/16
    position: relative; // or absolute or fixed, but not static
}

.inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden; // or scroll, auto
}

Answer 2

您需要将ul完全定位在绿色div以免影响填充。 这是您需要的CSS：

div {
    width: 70%;
    position: relative;
}
ul {
    padding-bottom: 56.25%;
    background: green;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}