首页 文章

适合父母并保持宽高比的Div

提问于
浏览 次
0

我有一个保持宽高比的 div 元素：它根据宽度计算高度（使用填充技巧） . 我想做的是将 div 放入另一个，通过适当的垂直和水平可用空间，没有裁剪 . 我认为最接近我想要的是 object-fit: contain - 仅为 img .

我希望div能够在保持纵横比的同时覆盖最大高度和宽度 . 没有垂直或水平作物 .

只有CSS才有可能吗？如果是这样，怎么样？

更新：好的article目前的情况 .

代码（可以是任何其他解决方案，不必在此代码段上构建）：

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
}

.container:before {
  content: "";
  display: block;
  width: 50%;
  padding-top: 50%;
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

<div class="container">
  <div class="embed">
    this should accommodate all the available space and maintain aspect ratio, no crop when width is too wide
  </div>
</div>

enter image description here

html css css-position aspect-ratio

1 回答

  • 1

    好吧，看起来它可以't be solved by CSS only. If anyone interested, I'组合一个React component完成工作（测试和更好的README很快，当我有时间） .

    它将其子项包装成 div 并使用JavaScript计算该div的宽度和高度，以便在保持给定宽高比的同时容纳可用空间 . 它基本上拉伸包装，直到其中一侧达到最大值 .

    BREAKING UPDATE a CSS only solution已被发现！

    回复于

相关问题