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

Question

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

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

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

谁能帮帮我？

我想要的是这样的……

但我得到的是这个......

.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

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

这个 sn-p 删除 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>

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

Answer 2

例如，您可能不需要绝对定位的 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>