确保元素保持指定的纵横比

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%。
   • 否则可能会太高，在这种情况下，我们希望比例是宽度除以比率。为了垂直居中，我们使用设置为 (window_height - element_height) / 2 的 margin-top。
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 使用的布局模型不允许以声明方式定义 inscribing。