html - CSS div 大小高度自动调整

Question

我有一个包含 videoWrapper 的 div 元素。我想让它做的是当我缩小浏览器的屏幕时能够自动调整大小。它适用于宽度，因为我可以为其设置一个 %。但是我必须为像素设置一个固定值。 所以现在它会自动调整宽度而不是高度，它始终保持不变。

这是我为div 使用的css 样式

height: auto;
height: 700px;
width: 70%;
border-style: solid;
border-color: red;

Answer 1

像这样的东西应该可以工作

<div class="videoWrapper">

<iframe width="560" height="349" src="" frameborder="0" allowfullscreen></iframe>

</div>

 .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
 }
   .videoWrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }