设置最小高度等于宽度

Question

我有一个流体宽度 div，它在另一个块级元素中。

HTML

<div></div>

CSS

div {
    width:50%;
    min-height: /*equal to width */;
}

我希望将最小高度设置为等于宽度，这样除非内容太多，否则它就是一个正方形。到那时，它应该垂直扩展。这可以用CSS来实现吗？

我尝试过的：

使用百分比填充或边距，但这只会设置高度，而不是 max--height 并将内容向下推。

Answer 1

一种选择是使用 viewport percentage units。在这种情况下，50vw 是视口的 50%。如果 div 是根元素并且它的 width 是相对于视口的，那么这项工作将按预期进行。否则你必须计算相对于视口的高度才能工作。

例如：

div {
  width: 50vw;
  min-height: 50vw;
  background: #000;
}

<div></div>

Answer 2

因为填充是相对于元素宽度的，所以您可以使用伪元素通过使用 padding-top: 100%;:

来强制最小高度

div {
  float: left;
  margin: 10px;
  width: 25%;
  background: lightGreen;
  position: relative;
}

div:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}

<div></div>

<div>
  div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content.
  div with content. div with content. div with content. div with content. div with content. div with content.
</div>

<div>
  div with content. div with content.
</div>

Answer 3

根据@Turnip 的回答，这是我最终使用的：

/* Maintain Height While Loading Trick */
figure {
  background: #999;
  width: 100%;
  overflow: hidden;
  line-height: 1;
}
figure:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}

/* some other CSS that's probably in your project already */
div {
  max-width: 25%;
  margin: 10px;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

<div>
  <figure>
    <img src="https://picsum.photos/4000/4000" alt="">
  </figure>
</div>

<h1>Some stuff below the image. Is it jumpy?</h1>

设置最小高度等于宽度

Set min-height equal to width

html

css

height

width