在保持比率的同时填充父 div答案

【问题标题】：Fill a parent div while maintaining a ratio在保持比率的同时填充父 div
【发布时间】：2021-11-26 05:20:48
【问题描述】：

我希望有一个 div 部分，在保持比例的同时尽可能地填充其 div 父级。

渲染结果是这样的：

到目前为止我所拥有的：

html,
body {
  height: 100%;
}

.parent {
  /* Parent's height and width are unknown,
     it could be dynamic, e.g. parent is part of a flex layout. */
  height: 80%;
  width: 90%;
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

.child {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #A0522D;
}

<div class="parent">
  <div class="child">
    content that is not images...
  </div>
</div>

这个 css 的行为就像我想要的那样，但是这是使用视口而不是父 div，这在实际条件下是一个问题。

我正在寻找一种基于父div的填充方式。

【问题讨论】：

不要使用 90vw，而是使用 90% 或您需要的任何百分比 (%)。请注意，50.625% 也有效。
使用 90% 和 50.625% 使子 div 只跟随父级而不保持其比例。
尝试更改“child”position: relative; 并移除顶部、底部、左侧和右侧的位置。使用边距，您可能也想删除它，除非您需要水平居中，然后使用margin 0 auto; 我现在有一些测试代码，父 div 为 40%，子 div 为 80%，它可以工作，我有尝试了几种不同的百分比。除了这些变化之外，没有其他区别。
我无法提出您的建议；子 div 跟随父的宽度，所以我确实打破了我想要的子比例约束。
相关：stackoverflow.com/a/65864592/8620333

标签： css

【解决方案1】：

使用弹性盒和填充。使用媒体查询来确定视口的最小纵横比。然后进行相应的调整。

html,
body {
  height: 100%;
}

.parent {
  height: 100%;
  width: 100%;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  /* to center */
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 100vw;
  /* 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-bottom*/
  padding-bottom: 56.25%;
  background: #A0522D;
}

@media (min-aspect-ratio: 16/9) {
  .child {
    height: 100vh;
    /*16:9 aspect ratio = 9 / 16 = 177.77 = width*/
    width: 177.77vh;
    padding: 0;
    margin: 0px;
    background: red;
  }
}

<div class="parent">
  <!-- the viewbox will provide the desired aspect ratio -->
  <div class="child">
    content that is not images...
  </div>
</div>

这是fiddle。

【讨论】：

谢谢！这是一个很好的技巧。然而，儿童只适应宽度，而不是高度。调整宽度和高度是没有 JS 无法解决的棘手部分。
@QuentinRoy，这个怎么样？我使用媒体查询来检查视口的纵横比。当比例至少为 16:9 时，它会调整到高度。无需 javascript。
谢谢！但是现在孩子依赖于视口。如果父母不是身体的大小怎么办？如果它只是页面的任何其他组件怎么办？例如，如果它是 flex 布局的一部分（参见示例），那么它的大小通常取决于它的兄弟姐妹..
@QuentinRoy，所以我猜你已经通过 js 解决了这个问题。您到底在寻找什么样的解决方案？
@QuentinRoy 我分配了相对于父容器的位置，这将使子元素相对于父容器绝对定位我做了同样的事情，你可以看到代码。

【解决方案2】：

也许添加绝对位置，它可以通过将顶部、右侧、底部、左侧设置为 0 和自动边距来工作。您也可以使用 flex 将其居中或使用left 50%绝对居中并转换-50%。

body {
            padding: 0;
            margin: 0;
            height: 100vh;
            width: 100vh;
           

        }

        .child {
            width: 90vw;
            /* 90% of viewport vidth */
            height: 50.625vw;
            max-height: 90vh;
            max-width: 160vh;
            /* Adding this maybe min-width and min-height */
            min-height: 90vh;
            min-width: 160vh;
            
            /* 16/9 * 90 = 160 */
            background: #f7f7f7;
            box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.18);
            border-radius: 4px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Child</title>
</head>

<body>  <!-- parent -->
    <div class="child"></div>
</body>

</html>

【讨论】：

这很好，但是孩子不取决于父母的大小，而是视口的。
thx ?，没有得到你想要做的，但是父母占据了所有的视口，现在孩子们会受到最大宽度和最大高度的限制，你可以设置最大宽度/height 到带有像素的父级。
是的，但我的问题是您通常无法控制父级的尺寸。在我的例子中，父母是弹性布局的一部分。
是的，得到了你，但不是 100%，你也可以使用 calc，如果你能提供一个例子，就像你对图像和一些数字所做的那样，这将非常有帮助，父母可以限制为它（最大，最小）高度和宽度。
Joris 的图纸完美地说明了我们正在寻找的东西。

【解决方案3】：

从而使子容器的尺寸依赖于父容器的父容器集合position:relative。

通常，当我们创建一个元素position:absolute 时，它相对于初始包含块（即<body>）定位，除非任何其他最近的父容器被赋予静态以外的位置（默认情况下）。所以，通过为父容器提供相对位置，我们将 .child 元素相对于 .parent 定位，而 .parent 之前相对于文档或正文定位。

这对你有用

html,
body {
  height: 100%;
}

.parent {
  /* Parent's height and width are unknown,
     it could be dynamic, e.g. parent is part of a flex layout. */
  position:relative;
  height: 80%;
  width: 90%;
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

.child {
  width: 90%;
  /* 90% of viewport vidth */
  height: 50.625%;
  /* ratio = 9/16 * 90 = 50.625 */
  max-height: 90%;
  max-width: 160%;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #A0522D;
}

<div class="parent">
  <div class="child">
    content that is not images...
  </div>
</div>

【讨论】：

谢谢！但这不会保留纵横比。

【解决方案4】：

使用aspect-ratio: 16 / 9; overflow: hidden; (aspect-ratio MDN docs) 应该可以为您提供您正在寻找的确切结果，而无需使用填充技巧。确保父级设置为display: grid，否则它可能无法正确缩放。

除了 Safari，所有主流浏览器 (caniuse.com) 都支持 aspect-ratio CSS 属性，不过 Safari 计划今年增加支持。这是实现此效果的最佳/正确方法，无需借助 JavaScript 或任何 hack 解决方案。

Stack Overflow 上的相关问题和答案：

https://stackoverflow.com/a/66786774/3824249（与我的解决方案非常相似）
https://stackoverflow.com/a/20593342/3824249（另一种仅使用 CSS 的替代方案，尽管使用 position: absolute 进行元素定位更hacker）

这是我的实际解决方案：

html, body { height: 100%; }

.parent {
  display: grid;
  resize: both;
  height: 50%;
  width: 90%;
  border: 2px solid #000;
  overflow: hidden;
}

.child {
  width: 100%;
  max-height: 100%;
  margin: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  background: #a0522d;
  text-align: center;
  font-size: 20px;
  color: white;
  /* using the below to center the text, optional */
  display: flex;
  align-items: center;
  justify-content: center;
}

<div style="padding: 5px 10px; margin-bottom: 10px; background: #f00; color: #fff; text-align: center; z-index: 1;">Resize the block below using the resize controls to see this in action.</div>
<div class="parent">
  <div class="child">content that is not images...</div>
</div>

【讨论】：

@QuentinRoy 我刚刚发布了我的解决方案，我相信它完全符合您的要求。有机会时请看一看。除了 Safari，所有主流浏览器都支持 aspect-ratio CSS 属性，不过 Safari 计划今年增加支持。这是实现此效果的最佳方式，无需借助 JavaScript 或任何 hack 解决方案。
谢谢！我不知道纵横比属性。不幸的是，我不能使用它，因为 Safari，但我不能等待它被广泛使用。我相信这是唯一的方法。
@QuentinRoy 是的，我对此也很兴奋。应该是今年。
这个答案不会产生the behavior requested in the question。当父级较宽时，棕色区域不应拉伸到全宽，应保持其纵横比。
@BrandonMcConnell 在 Firefox 93 中，当我单击“运行代码 sn-p”时，它是 looks like this。但是，我只是在 Edge 中尝试过，它在那里正确显示。根据 MDN，Firefox 从 89 版开始完全支持 aspect-ratio，所以我不确定为什么会出现这种差异。