Javascript 确保图元保留指定的纵横比

是否需要在CSS中指定纵横比（如4:3或16:9），然后使div（container）块适合当前窗口的宽度和高度

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

---

编辑：那些仍然感兴趣的人只使用样式实现这一点的一个很好的例子是Bootstrap的类。

找到了一种方法。这可能很艰难，但它应该让你走。将元素的高度设置为零，然后使用百分比作为填充

例如，4:3：

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

例如，16:9

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

不幸的是，没有

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

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

但当时没有一家浏览器供应商表示对此感兴趣

---

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

为此，我担心您需要一些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);
});

说明：

首先，我们将div的宽度和高度放大到100%，以便知道它有多少空间

然后我们向上看它是否太宽，这意味着宽度更大 比高度乘以比率。

• 如果是，请更改宽度。高度已经达到100%
• 否则它可能太高，在这种情况下，我们希望比例是宽度除以比率。为了垂直居中，我们将边距顶部设置为（窗口高度-元素高度）/2

如果两个规则都不适用，则div已正确缩放

最后，我们添加了事件监听器，用于在文档完全加载时以及在窗口大小更改时使用

完整代码和工作示例如下：

---

这个问题已经提出了几个星期了，但是有一种纯粹的CSS方法可以实现这一点。谢谢你用它来回答。它使用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;
}

---

坏消息是。

答案是

no

。绝对的，再加上一点JS怎么样？@syntheypher不需要JS。这是一个简单的概念，在容器中的div的宽度/高度上使用百分比和填充来锁定div与纵横比的比率。我想这可能就是你问题的答案。[ [1]：不，不幸的是，这只适用于调整窗口宽度，而不是高度。这只适用于窗口宽度，一旦你调整窗口高度超过被剪裁的纵横比。此外，如果我想调整子元素相对于百分比的大小，它将不起作用，因为高度为0。无论如何，谢谢。如果e比率是固定的，但窗口无法容纳它？比率应该会神奇地改变？它可以缩小以适应窗口，在窗口的两侧留下空白。1+我很惊讶，还没有人对此进行投票。我已经使用这种方法很多年了；当在响应性嵌入的youtube视频上保持纵横比时，它可以完美地工作。See我添加到原始帖子中的图像很好，但在调整窗口高度时不起作用。这将是完美的，我不知道它为什么不流行。替换“scaled.height（“100%”）；scaled.width（“100%”）；by scaled.css（{'height'：'100%”，'width'：'100%”）；否则它在具有框大小：border的div上失败-box@JohnLee我刚刚用Firefox 44进行了测试，它甚至对border box也适用。您使用了什么浏览器？@HubertGrzeskowiak如果border box div有边框（例如：边框：5px纯黄色），则按比例缩放。高度（“100%”）将使div的内联样式中的数字大于100%；顺便说一句，我使用了Chrome。尝试了您的解决方案，但在FX中对我不起作用。改为添加了框大小。@HubertGrzeskowiak您可以使用scaling元素修改相同的值吗？这意味着保持文本行到行。我需要使用scaling元素实现相同的功能，但文本将保持不变同样。这是纯粹的天才，对我来说非常适合，我想浏览器已经赶上了，这使得它很容易成为最好的解决方案！