css - Div 全宽，尽可能保持宽高比，否则可变高度

Question

我有一个包含一些元素的 div。我希望 div 的宽度为 100%，但如果可能，尽量保持纵横比。如果包裹的元素溢出，则高度设置为自动。

<div class="wrap">
    <div>bla bla bla</div>
    <img ... />
    <span>bla bla bla</span>
    <div>test test</div>
</div>

我想 CSS 应该是这样的:

.wrap {
    width: 100%;
    min-height: IQ200-auto; /* dude, try to maintain aspect ratio (2:1) if possible */
    height: auto;
}

有人遇到过这个问题吗？

Answer 1

这是我以前用过的一种方法。从链接的帖子和 Pete 的 fiddle 中可以看出，典型的方法通常涉及填充。这是因为基于百分比的填充值始终基于父元素的宽度(这在 CSS 规范中)。大多数方法将在内部包装器上使用 position:absolute 以使其脱离流程并强制纵横比。 Pete 的 fiddle 使用负边距，这也很好用，因为它也是基于父宽度的。下面是一个使用相同技巧使用 float 伪元素的解决方案。它的宽度为 0 像素，但顶部填充为 80%。添加 overflow:scroll(或 hidden 也可以)允许父级不“崩溃”。结果是 div 至少与 float 伪元素一样高。

.container {
  width: 500px;
  margin: auto;
}
img {
  max-width: 100%;
}
.wrap {
  background: #8C8;
  color: white;
  overflow: auto;
}
.wrap:before {
  content: '';
  display: block;
  padding-top: 80%;
  float: left;
  width: 0px;
}

<div class="container">
  <div class="wrap">
    <div>bla bla bla</div>
    <img src="https://placehold.it/600x300">
    <span>bla bla bla</span>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div>Content after the item</div>
  <div class="wrap">
    <div>bla bla bla</div>
    <img src="https://placehold.it/600x300">
    <span>bla bla bla</span>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div>Content after the item</div>
</div>