css 使用flex拉伸项时忽略纵横比

3phpmpom 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(108)

如果我在Flex容器中有一个1：1宽高比的项目，项目的高度故意被拉伸到其他Flex项目的高度-它会忽略宽高比设置。

<div style="display: flex;">
  <div style="aspect-ratio: 1; background: blue">1:1</div>
  <h1>Blue box should have 1:1 aspect ratio</h1>
</div>

字符串
我已经尝试设置width: min-content并手动覆盖高度，但我希望高度由flex stretch属性设置。

css

来源：https://stackoverflow.com/questions/77473649/aspect-ratio-is-ignored-with-flex-stretching-items

1条答案

按热度按时间

vecaoik11#

解决方案一

如果要保持蓝色框的长宽比为1：1，同时允许Flex容器拉伸其高度，则可以将Flex属性沿着设置为固定宽度，或者在框上使用min-width属性。

<div style="display: flex;">
  <div style="flex: 1; aspect-ratio: 1; background: blue;">1:1</div>
  <h1>Blue box should have 1:1 aspect ratio</h1>
</div>

字符串

方案二

设置min-width：0允许框在必要时收缩以保持纵横比。

<div style="display: flex;">
  <div style="min-width: 0; aspect-ratio: 1; background: blue;">1:1</div>
  <h1>Blue box should have 1:1 aspect ratio</h1>
</div>

型

赞(0）回复(0）举报 2023-11-19

我来回答

css 使用flex拉伸项时忽略纵横比

1条答案

解决方案一

方案二

相关问题

热门标签

最新问答