主页 / 问题 / 1592009
Accepted
Qwertiy
Asked:2024-08-27 09:45:57 +0800 CST2024-08-27 09:45:57 +0800 CST

元素不会因纵横比而变胖

  • 772

为什么内容高度的 div 在高度超过宽度（第 4、第 7 和第 8）的情况下不是方形的？

div {
  aspect-ratio: 1;
  outline: 1px solid red;
  margin: 0 1em 1em 0;
  float: left;
  line-height: 1;
}

img {
  display: block;
}
<div>12345678</div>
<div style="width: 8ch">w</div>
<div style="height: 8ch">h</div>
<div>1<br>2<br>3<br>4</div>
<div><img src="//placehold.co/64"></div>
<div><img src="//placehold.co/64x32"></div>
<div><img src="//placehold.co/32x64"></div>
<div><img src="//placehold.co/32x64" height="64"></div>

截屏

css

1 个回答

  1. Best Answer

    https://drafts.c​​sswg.org/css-sizing-4/#aspect-ratio-minimum第 4.3 和 4.4 段。

    粗略地说，当两个尺寸都没有指定时，那么高度由宽度决定，但是如果没有显式设置min-height或者块不是“可滚动的”（未指定overflow），则块的最小高度由其设置最大高度，以免内容被切断。

    如果设置了overflow: auto，就会有滚动的方块。

    如果设置min-height: 0，则会出现溢出的方块。

    div>div {
  aspect-ratio: 1;
  outline: 1px solid red;
  margin: 0 1em 1em 0;
  float: left;
  line-height: 1;
}

div.overflow>div {
  overflow: auto;
}

div.min-height>div {
  min-height: 0;
}

img {
  display: block;
}
    <div class="overflow">
  <div>12345678</div>
  <div>111<br>222<br>333<br>444<br>555</div>
  <div><img src="//placehold.co/64x32"></div>
  <div><img src="//placehold.co/32x64" height="64"></div>
</div>
<div class="min-height">
  <div>12345678</div>
  <div>111<br>222<br>333<br>444<br>555</div>
  <div><img src="//placehold.co/64x32"></div>
  <div><img src="//placehold.co/32x64" height="64"></div>
</div>

    • 1

相关问题