保持div的纵横比,但在CSS中填充屏幕宽度和高度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (77)

我有一个网站可以放在一起,它具有近似于16:9景观的固定纵横比,就像视频一样。

我想让它居中并扩展以填充可用宽度和可用高度,但不要在任何一边增大。

例如:

  1. 高而薄的页面会使内容在整个宽度上保持一定的高度。
  2. 一个短的宽页面可以将内容拉伸到整个高度,并具有相应的宽度。

有两种方法我一直在看:

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

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

有任何想法吗?

提问于
用户回答回答于
// Mixin for ratio dimensions    
.viewportRatio(@x, @y) {
  width: 100vw;
  height: @y * 100vw / @x;
  max-width: @x / @y * 100vh;
  max-height: 100vh;
}

div {

  // Force a ratio of 5:1 for all <div>
  .viewportRatio(5, 1);

  background-color: blue;
  margin: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
用户回答回答于

使用新的CSS视口单元 vwvh(视口宽度/视口高度)

调整垂直和水平大小,你将看到元素将始终填充最大视口大小,而不破坏比率和滚动条。

(纯)CSS

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}
<div></div>

如果想使用最多90%的视口宽度和高度:

* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div></div>

此外,浏览器支持也相当不错:IE9+,FF,Chrome,Safari-caniuse

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动