首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >保持div的纵横比,但在CSS中填充屏幕的宽度和高度?

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

Stack Overflow用户
提问于 2013-12-15 09:24:51
回答 9查看 131.6K关注 0票数 133

我有一个网站放在一起,有一个固定的纵横比约16:9景观,就像一个视频。

我想让它居中并扩展,以填满可用宽度和可用高度,但永远不会在两边变大。

为例:

  1. 又高又细的页面,其内容将拉伸整个宽度,同时保持一定比例的高度。
  2. 短而宽的页面,其内容将拉伸整个高度,并保持一定比例的宽度。

我一直在研究两种方法:

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

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

有什么想法吗?

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2016-01-25 07:35:51

现在指定了一个新的CSS属性来解决这个问题:object-fit

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

该功能目前已得到广泛支持(http://caniuse.com/#feat=object-fit)。

票数 6
EN

Stack Overflow用户

发布于 2013-12-15 18:03:22

使用新的CSS viewport units vwvh (视口宽度/视口高度)

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

(纯) CSS

代码语言:javascript
复制
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 */
}

代码语言:javascript
复制
* {
  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 */
}
代码语言:javascript
复制
<div></div>

如果您想使用视口的最大宽度和高度,比如90%:

代码语言:javascript
复制
* {
  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;
}
代码语言:javascript
复制
<div></div>

此外,浏览器的支持也很好: IE9+,FF,Chrome,Safari- caniuse

票数 315
EN

Stack Overflow用户

发布于 2014-07-23 02:00:15

只是在更少的混合中重新制定Danield的答案,以供进一步使用:

代码语言:javascript
复制
// 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;
}
票数 20
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20590239

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档