Question

我在Flex容器中有两个彼此相邻的盒子。一个包含iframe，另一个包含表单。我希望iframe框与表单框的高度相匹配，并让iframe框保持16：9的宽高比。

我无法使用旧的padding-bottom: 56.25%技巧，因为这是基于宽度的，这对于Flexbox来说很棘手。

如果你想要解决这个问题，这里有一个近似我的HTML和（S）CSS的小提琴。 https://jsfiddle.net/7zgh88ew/

如果有人有任何想法，我们将不胜感激！

Answer 1

使用具有正确比率的inline-flex和虚拟img，将其设置为visibility: hidden然后将iframe置于绝对位置，它仅适用于Chrome，因此必须存在一些问题，与其他浏览器一样，img无法正确调整其父级的大小。

我会自己发一个问题，看看是否有人知道这件事，并在我知道更多时更新这篇文章。

<强>更新

对于固定高度，即200px，可以在.container上设置它并将height: 100%添加到.iframe，它将适用于其他浏览器（{ {3}}）

但是，如果form-content的大小取决于其内容，它仍然只能在Chrome上使用。

solution provided by Tunçel Mert

Stack snippet

.container {
  display: inline-flex;
  height: 200px;
}

.iframe {
  position: relative;
  height:100%;
  background: red;
}
  .iframe img {
    height:100%;
    visibility: hidden;
  }
  .iframe iframe {
    position: absolute;
    left: 0; 
    top: 0;
    height: 100%;
    width: 100%;
  }

.form {
  background: orange;
}

.fake-form-content {
  width: 200px;
}

<div class="container">
  <div class="iframe">
    <img src="http://placehold.it/160x90">
    <!-- Sorry about the video -->
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" width="320" height="180"></iframe>
  </div>
  <div class="form">
    <div class="fake-form-content">
      Fake form content
    </div>
  </div>
</div>

Flexbox：匹配元素的高度，同时保持宽高比

1 个答案: