相关疑难解决方法(0)

保持div的宽高比但在CSS中填充屏幕宽度和高度？

我有一个网站,它有一个固定的长宽比近似16:9景观,像一个视频.

我想让它居中并扩展以填充可用的宽度和可用的高度,但不要在任何一侧变大.

例如:

高而薄的页面将使内容伸展整个宽度,同时保持比例高度.
较短的宽页面将使内容延伸到整个高度,具有成比例的宽度.

我一直在研究两种方法:

使用具有正确宽高比的图像来扩展容器div,但我无法让它在主要浏览器中以相同的方式运行.
设置比例底部填充,但仅相对于宽度工作并忽略高度.它随着宽度不断变大,并显示垂直滚动条.

我知道你可以很容易地用JS做到这一点,但我想要一个纯CSS解决方案.

有任何想法吗？

html css aspect-ratio responsive-design

Hen*_*son

2014 04-14

108
推荐指数

6
解决办法

10万
查看次数

在保持比例的同时填充父 div

我希望有一个 div 部分，在保持比例的同时尽可能地填充其 div 父级。

渲染结果将是这样的：

到目前为止我所做的：

html,
body {
  height: 100%;
}

.parent {
  /* Parent's height and width are unknown,
     it could be dynamic, e.g. parent is part of a flex layout. */
  height: 80%;
  width: 90%;
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

.child {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto; …

Run Code Online (Sandbox Code Playgroud)

css

Jor*_*era

2021 05-19

6
推荐指数

1
解决办法

336
查看次数