Div 全宽，如果可能，尽量保持纵横比，否则可变高度答案

【问题标题】：Div full width, TRY to maintain aspect ratio if possible, else variable heightDiv 全宽，如果可能，尽量保持纵横比，否则可变高度
【发布时间】：2017-05-04 22:01:21
【问题描述】：

我有一个包含几个元素的 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;
}

以前有人遇到过这个问题吗？

【问题讨论】：

stackoverflow.com/questions/1495407/…
http://stackoverflow.com/questions/1495407/... 始终保持其纵横比，但我正在寻找一种TRY TO尊重纵横比的解决方案，ELSE 自动高度
这不是重复的！您甚至阅读了整个问题吗？
@Pete 从字面上看，这些答案都没有使用负边距来克服绝对定位的明显问题：即它使元素脱离流动，如果你不希望元素永远高于纵横比。 “如果你不够聪明，看不到这一点，那就不要去攻击那些聪明的人。”在一个我们应该帮助那些看不到我们发现明显或容易的东西的人的网站上，这是一种很好的态度。您的小提琴将是这个问题的独特答案的一个很好的例子。
@Pete 是的，jsfiddle 正在工作......谢谢......哇......你很快...... ^_^

标签： css

【解决方案1】：

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

.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>

【讨论】：