css - 纯粹使用 CSS 给定宽高比的信箱内容

Question

我知道两种方法可以在给定的纵横比下将元素增长到最大尺寸（在代码笔中，注意并使用调整大小手柄）：

• 旧的填充技巧，也可以在这里查看我的 codepen和
• 较新的single-celled-grid-with-svg-sidekick 技巧，也可以在这里查看我的 codepen。

这两种解决方案的工作原理是让高度由给定的宽度和纵横比确定。

两种解决方案都失败时

• 我没有足够的高度来给出并且真的想要垂直信箱的内容（左右空格）或
• 我确实有足够的高度，我仍然希望内容水平信箱（顶部和底部有空格）。

一个典型的例子是固定大小的查看器窗口和不同大小的图像显示。

这在 JS 中很容易做到，但当然最好使用纯 CSS 解决方案。

这个代码框显示了我想要的，在 JS 中实现。

有一些特殊的解决方案：svghaspreserveAspectRatio和have （视频实际上很酷img，因为它允许您独立于视频定位 chrome；如果您想玩示例，我这里有一个）。videoobject-fit

那么-我如何获得任意html？

标签： cssaspect-ratio