Html 自动缩放内容以匹配其包装'；通过CSS3使用变换来确定s区域

我有一个

DIV

用作占位符，宽高比为8:1，这样设计

.out-wrap {
  width: 100%;
  padding-bottom: 12.5%;
}

里面还有一个绝对的

DIV

，长宽比相同

.in-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

在

内部。在wrap

元素中是另一个8:1

DIV

（.content），它总是640x80px

.content {
  width: 640px;
  height: 80px;
}

在

HTML

中，它看起来是这样的

<div class="out-wrap">
  <div class="in-wrap">
    <div class="content">
      <!-- ... anything ... -->
    </div>
  </div>
</div>

注意：元素

.content

可能包含任何内容，而不仅仅是图像

我是否可以使用CSS3

transform

属性在wrap区域中缩放

.content

以完全适合

我已经尝试过在函数和属性的支持下使用函数，但没有成功。我可以通过使用JavaScript实现这一点，但我想知道是否仅通过CSS就可以实现。
带失真的缩放？@Temaniaf如果我不理解你的意思，你需要准确地填充所有空间（宽度和高度需要不同的缩放==失真），或者用溢出填充空间（宽度和高度需要缩放相同==无失真）@TemaniAfif Ah that.no，已经提到所有三个容器都具有相同的纵横比（8:1），因此，宽度和高度都应该具有相同的缩放值。