响应式调整父级中的 HTML div 大小，包括信箱和邮筒，仅限 CSS

Question

给定一个可以调整垂直和水平大小的父级 HTML div 元素，我希望子级 div 保持宽高比（例如 16:9），位于父级元素的中心并受其边缘限制。请不要JS。

单独使用 CSS 可以吗？（顶部“较宽”的父图像示例是邮筒，底部“较窄”是信箱。）

注意：在大多数情况下，父级将小于实际的浏览器视口，因此不要根据浏览器视口的宽度或高度来判断您的答案（例如）。这应该能够在任何给定的父/子尺寸下独立存在。

Answer 1

解决方案

近四年后，@container查询并aspect-ratio提供了非常好的解决方案！

<div class="resize-at-will">
  <div class="maintain-aspect-ratio">
    ...
  </div>
</div>

<style>
  .resize-at-will {
    container-type: size;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .maintain-aspect-ratio {
    aspect-ratio: 16 / 9;
    width: 100%;
    background-color: #ff3e00;
  }
  @container (min-aspect-ratio: 16 / 9) {
    .maintain-aspect-ratio {
      width: auto;
      height: 100%;
    }
  }
</style>

• 请参阅此 CodePen 的实现：https ://codepen.io/arxpoetica/pen/JjZdwpB
• 如果您喜欢的话，另请参阅 Svelte REPL 版本：https://svelte.dev/repl/0896d71005944bb6a7cf5463592b533b ?version=3.52.0

注意事项

请注意，它不响应视口，但实际上通过 CSS 声明响应父 div container-type: size;。如果你想响应视口，只需使用@media ([min/max]-aspect-ratio: x / x) { ... }

另请注意，容器查询适用于大多数现代浏览器，但 Firefox 尚不支持。然而，有一个polyfill：https ://developer.chrome.com/blog/cq-polyfill/#the-container-query-polyfill

更多信息

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
• https://caniuse.com/mdn-css_at-rules_container