确保元素保留指定的宽高比

Question

无论如何在CSS中指定纵横比，例如4：3或16：9，然后让div（容器）块适合当前窗口的宽度和高度？

一个简单的问题，希望它有一个相对简单的答案。

编辑： 那些仍然只对使用样式实现此功能的好例子是Bootstrap的responsive helpers类。

Answer 1

为此，我担心你需要一些JS。我在这里使用了jQuery：

function preserveAspect() {
  var scaled = $("#scaled");
  scaled.height("100%");
  scaled.width("100%");
  scaled.css("box-sizing", "border-box");
  var ratio = 16/9;
  var w = scaled.outerWidth();
  var h = scaled.outerHeight();

  if (w > ratio*h) {
    scaled.width(ratio*h);
    // horizontal centering is done using margin:auto in CSS
  } else if (h > w/ratio) {
    var newHeight = w/ratio;
    scaled.height(newHeight);
    // for vertical centering:
    scaled.css({marginTop: ($("body").height()-newHeight)/2});
  }

}
$(document).ready(function() {
    preserveAspect();
    $(window).resize(preserveAspect);
});

说明：

1. 首先，我们将div放大到100％的宽度和高度，以便我们知道它有多少空间。
2. 然后我们查看它是否太宽意味着宽度更大 比高度倍数比。
   • 如果是，请更改宽度。高度已经达到100％。
   • 否则它可能太高，在这种情况下我们希望比例宽度除以比率。为了垂直居中，我们使用margin-top设置为（window_height - element_height）/ 2。
3. 如果两个规则都不适用，则div已经正确缩放。
4. 最后，我们为文档完全加载以及窗口大小何时更改时添加事件侦听器。

此处的完整代码和工作示例： http://jsbin.com/efaRuXE/5/

Answer 2

这个问题现在已经有几个星期了，但 是一种纯粹的CSS方式来实现这个目标。感谢Danield使用它来回答this question。它使用 vw 和 vh 单位，如下所示：

#wrapper {
    height:75vw;
    max-height:100vh; /* max-height / height = aspect ratio */
    width:100vw;
    max-width:133.3333vh; /* max-width / width = aspect ratio */
    position:absolute;
}

坏消息是support is iffy in current mobile browsers and in IE before version 11。

Answer 3

找到了办法。这可能很粗糙，但它应该让你去。将元素的高度设置为零，然后使用百分比作为填充。

<强> jsFiddle example

例如，4：3：

div {
    height: 0;
    padding-bottom: 75%;
    background: #999;
}

例如，16：9

div {
    height: 0;
    padding-bottom: 56%;
    background: #999;
}

Answer 4

不幸的是没有。

我曾经在www-styles WG @ W3C构建中提出过这样的建议：

div {
  width: 50%;
  height: width(56.25%); /* 16:9 ratio */
}

但是当时浏览器供应商中没有人表达任何兴趣。

无论如何，上面的解决方案只允许定义盒子的比例。但CSS使用的布局模型不允许以声明方式定义铭文。