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

Question

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

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

例如:

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

---

我一直在研究两种方法:

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

---

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

有任何想法吗？

Answer 1

使用新的CSS视口单位 vw和vh(视口宽度/视口高度)

小提琴

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

(纯粹)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%:FIDDLE

* {
  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

Answer 2

只需Danield在LESS mixin中重新制定答案,以便进一步使用:

// 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;
}

Answer 3

将CSS媒体查询 @media与CSS视口单元 一起使用vw,vh以适应视口的宽高比.这样做的好处是可以更新其他属性font-size.

这个小提琴演示了div的固定宽高比,以及与其比例完全匹配的文本.

初始大小基于全宽:

div {
  width: 100vw; 
  height: calc(100vw * 9 / 16);

  font-size: 10vw;

  /* align center */
  margin: auto;
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

  /* visual indicators */
  background:
    url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
    url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
    silver;
}

然后,当视口宽度大于所需的宽高比时,切换到高度作为基本度量:

/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
  div {
    height: 100vh;
    width: calc(100vh * 16 / 9);

    font-size: calc(10vh * 16 / 9);
  }
}

这是在静脉非常相似max-width和max-height 办法由@Danield,只是更加灵活.

Answer 4

我最初的问题是如何既有一个固定方面的元素,又要在指定的容器中准确地适应它,这使得它有点繁琐.如果您只是想要一个单独的元素来保持其宽高比,那么它就容易多了.

我遇到的最好方法是给元素零高度,然后使用百分比填充 - 底部给它高度.填充百分比始终与元素的宽度成比例,而不是其高度,即使其顶部或底部填充也是如此.

W3C填充属性

因此,利用它可以为元素提供百分比宽度以容纳在容器内,然后填充以指定宽高比,或者换句话说,指定宽度和高度之间的关系.

.object {
    width: 80%; /* whatever width here, can be fixed no of pixels etc. */
    height: 0px;
    padding-bottom: 56.25%;
}
.object .content {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
}

因此,在上面的示例中,对象占据容器宽度的80%,然后其高度为该值的56.25%.如果它的宽度是160px那么底部填充,因此高度将是90px - 16:9的宽高比.

这里的一个小问题,对你来说可能不是问题,就是你的新对象里面没有自然空间.如果您需要放置一些文本,并且文本需要获取自己的填充值,则需要在其中添加容器并在其中指定属性.

某些旧浏览器也不支持vw和vh单元,因此我可能无法接受我的问题的答案,你可能不得不使用更低级的东西.

Answer 5

现在有规定来解决这个新的CSS属性：object-fit。

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

该功能现在得到广泛支持（http://caniuse.com/#feat=object-fit）。

Answer 6

我知道你问过你想要一个CSS特定的解决方案.要保持纵横比,您需要将高度除以所需的纵横比.16:9 = 1.777777777778.

要获得容器的正确高度,您需要将当前宽度除以1.777777777778.由于你不能width用正好CSS或百分比检查容器的容量,CSS如果没有JavaScript(据我所知),这是不可能的.

我编写了一个可以保持所需宽高比的工作脚本.

HTML

<div id="aspectRatio"></div>

CSS

body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }

JavaScript的

window.onload = function () {
    //Let's create a function that will scale an element with the desired ratio
    //Specify the element id, desired width, and height
    function keepAspectRatio(id, width, height) {
        var aspectRatioDiv = document.getElementById(id);
        aspectRatioDiv.style.width = window.innerWidth;
        aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
    }

    //run the function when the window loads
    keepAspectRatio("aspectRatio", 16, 9);

    //run the function every time the window is resized
    window.onresize = function (event) {
        keepAspectRatio("aspectRatio", 16, 9);
    }
}

function如果您想使用不同比例显示其他内容,可以再次使用

keepAspectRatio(id, width, height);