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

Posted 2023-03-06

【中文标题】确保元素保持指定的纵横比

【英文标题】：Ensure an element retains a specified aspect ratio

【发布时间】：2014-01-28 20:12:30

【问题描述】：

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

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

编辑：那些仍然对仅使用样式实现此目标感兴趣的人将是 Bootstrap 的 responsive helpers 类。

【问题讨论】：

答案是no。绝对

结合一点JS怎么样？

@SyntheCypher 不需要 js。这是一个简单的概念，在容器内的 div 的宽度/高度上使用百分比和填充将 div 锁定到纵横比的比率。

我认为这可能是您问题的答案。 [***.com/questions/12121090/…[1]：***.com/questions/12121090/…

不幸的是，只有在调整窗口宽度而不是高度时才有效。 Width (Working), Height (Not Working)

【参考方案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);
);

解释：

首先，我们将 div 的宽度和高度放大到 100%，以便我们知道它有多少空间。 然后我们查找它是否太宽，这意味着宽度更大 比高度乘以比率。 如果是这样，请更改宽度。高度已达到 100%。 否则可能会太高，在这种情况下，我们希望比例是宽度除以比率。为了垂直居中，我们使用设置为 (window_height - element_height) / 2 的 margin-top。 如果两个规则都不适用，则 div 已正确缩放。 最后，我们添加事件监听器，用于文档完全加载和窗口大小发生变化时。

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

【讨论】：

替换 "scaled.height("100%"); scaled.width("100%");"通过 scaled.css( 'height': '100%', 'width': '100%' );否则它会在带有 box-sizing:border-box 的 div 上失败

@JohnLee 我刚刚使用 Firefox 44 进行了测试，即使使用边框框也适用于我。你用的是什么浏览器？

@HubertGrzeskowiak 如果边框 div 有边框（例如：边框：5px 纯黄色），scaled.height("100%") 会使 div 的数字大于 100%它的内联样式；顺便说一句，我使用了 Chrome。

尝试了您的解决方案，但它在 FX 中对我不起作用。改为添加 box-sizing。

@HubertGrzeskowiak 你能用缩放元素修改它吗？意味着保持文本逐行。我需要使用缩放元素实现相同的功能，但文本将保持不变。

【参考方案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。

【讨论】：

这真是个天才，对我来说很完美，我猜浏览器已经赶上了，这很容易成为最好的解决方案！

【参考方案3】：

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

jsFiddle example

例如，4:3：

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

例如，16:9

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

【讨论】：

这仅适用于窗口宽度，一旦您将窗口的高度调整到超过它被剪裁的方面。另外，如果我想相对于百分比调整子元素的大小，它将不起作用，因为高度为 0。Picture 无论如何谢谢。

如果比率是固定的但窗口不能包含它，你会期望什么？这个比例应该会神奇地改变吗？

它可以缩小以适应窗口，在其两侧留下空白。

1+ 我很惊讶还没有人支持这个方法。我已经使用这种方法多年了；在保持响应式嵌入的 youtube 视频的纵横比时，它可以完美地工作。

查看我添加到原始帖子的图像很好，但在调整窗口高度时不起作用。

【参考方案4】：

很遗憾没有。

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

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

但当时没有浏览器供应商表示任何兴趣。

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

【讨论】：

这将是完美的我不知道为什么它没有流行起来。