html 如何使可调整大小的Flex项目保持其纵横比？

a6b3iqyw 于 2022-12-16 发布在其他

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

我在我的网站上有一个效果，它只能在16：9的宽高比范围内工作。这意味着我需要保持它在那个宽高比范围内。我想做一个垂直和水平居中的框，它可以按比例调整大小来包含效果。我看了很多关于Flex调整大小的教程和指南，但我仍然不能让它正常工作。包含框的填充是不平衡的，它也不能正确对齐。即使我使用100 vh/vw，它也可以水平滚动？？100%的视口高度真的意味着它所说的吗？
我真的不知道该怎么办...
Codepen下面是我的代码示例：
https://codepen.io/Ktashi/pen/KKeOJey
超文本标记语言

<div class="flex-align">
  <div class="aspect-ratio-box"></div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.flex-align {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aspect-ratio-box {
  height: auto;
  aspect-ratio: 16/9;
  background: red;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 94vw;
  max-height: 94vw;
  max-width: 94vw;
}

我试着改变弹性生长：属性的值，沿着flex-shrink：和弹性基础：但这并没有多大帮助。我非常卡住了，因为我只是断断续续地用html和css编码了大约一年。

Html

来源：https://stackoverflow.com/questions/74820310/how-can-i-make-a-resizable-flex-item-retain-its-aspect-ratio

1条答案

按热度按时间

eivnm1vs1#

您可以使用CSS媒体查询来测试项目是否适合具有100 vw/100 vh尺寸的父项。
这个片段只是给予一个想法。
它做了一些事情-通过设置box-sizing border-box使父代的填充成为其维度的一部分，并将高度或宽度设置为父代维度的%。

.aspect-ratio-box {
  aspect-ratio: 16/9;
  background: red;
}

@media (max-aspect-ratio: 16 / 9) {
  .aspect-ratio-box {
    width: 94%;
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .aspect-ratio-box {
    height: 94%;
  }
}

body {
  padding: 0;
  margin: 0;
  background: black;
}

.flex-align {
  background: blue;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

<div class="flex-align">
  <div class="aspect-ratio-box"></div>
</div>

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何使可调整大小的Flex项目保持其纵横比？

1条答案

相关问题

热门标签

最新问答