child div 的纵横比 16/9 始终适合 parent div CSS，不适用于小高度

Question

我正在尝试向图像添加面部叠加层，我希望面部始终位于内部 div。

图像需要适合 16/9 比例的背景并且始终适合外部容器，我在外部 div 的高度大于 16/9 比例的情况下工作，但是无论何时低于 16/9 它会砍掉头部的底部和顶部。

我需要这个才能与 IOS 一起使用，所以 aspect-ratio 在 safari 上不起作用，因此我使用旧的 padding-top 16/9 技巧。

谁能帮帮我？

我想要的是这样的...

但我得到的是这个...

.outside {
  position: relative;
  width: 500px;
  height: 200px;
  background: red;
    overflow: hidden;
}

.inside {
  height: 0;
  overflow: hidden;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 56.25%;
  background: blue;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<h1>Works when height is bigger</h1>

  <div class="outside" style="height:400px!important">
  <div class="inside" style="padding-top: 56.25%;">
    <img src="https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg" class="img">
  </div>
</div>

<h1>Does not work when height is smaller</h1>

<div class="outside">
  <div class="inside" style="padding-top: 56.25%;">
    <img src="https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg" class="img">
  </div>
</div>

Answer 1

您可能不需要在绝对定位 div 内使用绝对定位的图像，例如

.outside {
  position: relative;
  width: 500px;
  height: 200px;
  background: red;
}

.inside {
  position: absolute;
  top: 0;
  right: 72px;
  bottom: 0;
  left: 72px;
  display: flex;
  justify-content: center;
  background: blue;
}

.img {
  max-height: 100%;
  object-fit: contain;
}

<div class="outside">
  <div class="inside">
    <img class="img" src="https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg" />
  </div>
</div>

Answer 2

假设你知道外部元素的高度（正如你在问题中所做的那样），你可以使用 CSS min 函数来决定内部元素的宽度和高度应该是多少，以确保它有一个 16 /9 比率。

此代码段删除了 img 元素并将其替换为内部元素的背景图片。 outer 的高度作为 CSS 变量而不是高度设置传递，以便可以对其进行计算。

结果是：

.outside {
  position: relative;
  width: 500px;
  height: calc(var(--h) * 1px);
  background: red;
  overflow: hidden;
}

.inside {
  height: 0;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 56.25%;
  background-color: blue;
  --minw: calc(var(--h) * 16px / 9);
  width: min(100%, var(--minw));
  background-image: url(https://solvemoji-test.s3.eu-west-2.amazonaws.com/unnamed.jpg);
  background-size: auto min(100%, calc(var(--h) * 1px));
  background-position: center;
  background-repeat: no-repeat no-repeat;
}

<h1>Height is bigger</h1>

  <div class="outside" style="--h: 400">
  <div class="inside">
  </div>
</div>

<h1>Height is smaller</h1>

<div class="outside" style="--h: 200;">
  <div class="inside">
  </div>
</div>

请注意，如果事先不知道 outer 的高度，那么我认为您将不得不求助于 JS 在运行时间设置 --h。

child div 的纵横比 16/9 始终适合 parent div CSS，不适用于小高度

Aspect ratio 16/9 of child div always to fit parent div in CSS, not working on small height

html

css

aspect-ratio