Question

我有一个包含几个元素的div。我希望div的宽度为100％，但尽可能保持宽高比。如果包裹的元素溢出，则高度设置为auto。

<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的小提琴中看出的那样，典型的方法通常涉及填充。这是因为基于百分比的填充值总是基于父元素的宽度（这在CSS规范中）。大多数方法将在内部包装器上使用Private Sub OrderButton_Click() DoCmd.SetOrderBy "[FieldYouWantToSortBy]" DESC, "" End Sub将其从流中取出并强制纵横比。 Pete的小提琴使用负边距，这也可以很好地工作，因为它也是基于父宽度。下面是一个使用浮动伪元素使用相同技巧的解决方案。它的宽度为0px，但它的顶部填充率为80％。添加position:absolute（或overflow:scroll也会起作用）允许父级不“崩溃”。结果是div至少与浮动的伪元素一样高。

hidden

.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全宽，TRY以保持纵横比（如果可能），否则可变高度

1 个答案: