高度大于宽度的纵横比容器的CSS

编程问答 2022-08-12

问题描述

我正在尝试创建一个div，该div保持其宽高比，但是高度大于宽度。我搜索的大多数问题都假定宽度大于高度，因此使用padding-top来保持宽高比。

我想要9:16而不是16：9的比率，这意味着padding-top大于100％，这意味着div变得比页面更高。

这是我想要在宽屏幕时实现的功能（红色是内容，灰色是浏览器窗口）：

enter image description here

当窗口狭窄时：

enter image description here

我可以用普通的CSS实现吗？

谢谢。

解决方法

由于@ web-tiki已经显示了使用vh / vw的方法，因此我还需要一种在屏幕上居中的方法，这是 9:16 肖像。

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY将使此中心保持在屏幕中。 calc(100vw * 16 / 9)的预期高度为9/16。(100vw * 16 / 9 - 100vh)为溢出高度，因此，将overflow height/2向上拉将使其居中显示在屏幕上。

对于风景，保持 16：9 ，表示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

比率9/16易于更改，无需预先定义100:56.25或100:75。如果要先确保高度，则应切换宽度和高度，例如height:100vh;width: calc(100vh * 9 / 16)拍摄9:16的人像。

如果您想适应不同的屏幕尺寸，您可能也会感兴趣

  • background-size封面/包含
    • 以上样式类似于包含，取决于宽度：高度比率。
  • object-fit
    • 为img /视频标签覆盖/包含
  • @media (orientation: portrait) / @media (orientation: landscape)
    • 通过媒体查询portrait / landscape来更改比率。
aspect-ratioflexbox