Question

我正在尝试使用css创建div并将其宽高比保持为16：9。我进行了谷歌搜索，并很快找到了这个：How to maintain the aspect ratio。所以我尝试自己做，但遇到了问题。当我在里面添加文字时，比率会改变，而不再是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

使用您提供的链接中描述的填充技术构建具有所需宽高比的div。
将div设置为相对，绝对或固定，并在其中添加子元素。将此孩子定位为绝对，top，bottom，left和right设置为0.孩子将始终拥有与外部div相同的宽高比，无论它的内容是什么。
如果需要，请在内部元素上设置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;
}

使用css保持div的宽高比

JSFiddle

2 个答案: