Question

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

渲染结果如下：

到目前为止我做了什么：

html, body{
height:100%;
}

.parent{
height: 100%;
width: 100%;
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，但我找不到任何答案......

Answer 1

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

除 Safari 之外的所有主要浏览器 (caniuse.com) 都支持 aspect-ratio CSS 属性，但 Safari 计划在今年增加支持。这是实现此效果的最佳/正确方法，无需求助于 JavaScript 或任何黑客解决方案。

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

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

这是我的解决方案：

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>

Answer 2

也许这就是你所需要的。

html, body{
height:100%;
}

.parent{
height: 100%;
width: 100%;
 
border-style: solid;
border-width: 2px;
border-color: black;

}

.child {
width: 50%;
height: inherit;
margin: 0 auto;
left: 25%;
position: absolute;

background: #A0522D;
}

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

Answer 3

使用 flexbox 和 padding。使用媒体查询来确定视口的最小纵横比。然后进行相应调整。

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。

Answer 4

也许添加绝对位置并且它可以通过将顶部，右侧，底部，左侧设置为 0 并使用边距自动来工作。您也可以使用 flex 将其居中或绝对左 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>

Answer 5

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

通常，当我们创建一个元素 position:absolute 时，它是相对于初始包含块（即 <body>）定位的，除非任何其他最近的父容器被赋予静态以外的位置（默认情况下） .因此，通过为父容器提供相对位置，我们将 .child 元素相对于 .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>

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

5 个答案:

这是我的解决方案：

这对你有用