Javascript库强制HTML元素的纵横比？

Posted 2023-03-06

【中文标题】Javascript库强制HTML元素的纵横比？

【英文标题】：Javascript library to force aspect ratio of HTML elements?

【发布时间】：2012-06-24 05:32:44

【问题描述】：

是否有任何 javascript 库可以强制 html 节点（主要是图像和 div）在调整大小时保持其纵横比？

当元素的宽度受窗口大小限制时，这对于调整元素的高度特别有用。

注意：如果可以在纯 CSS 中完成，我买它！

【问题讨论】：

techpp.com/2008/08/02/… 和 ***.com/questions/757782/…

Here's an article about a somewhat more complicated technique.

@Derek 仅适用于图像

【参考方案1】：

你的意思是这样的？

http://jsfiddle.net/DerekL/J2s3C/

代码如下：

img
    width: 100%;
    height: auto;

对于其他元素，这将是一个位更复杂。

这里是第二个演示：http://jsfiddle.net/DerekL/5BgXk/：

<div id="wrapper"><div id="content"></div></div>

#wrapper 
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;

#content 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;    

【讨论】：

好吧，它只适用于图像，因为它们具有原生纵横比。 div 没有纵横比，因此浏览器无法设置合适的高度。

我的意思是，如果在您的示例中将 img 替换为 div，您将在哪里/如何设置所需的纵横比？

@Matthieu - 以下是使用 <img> 以外的元素的方法：jsfiddle.net/DerekL/5BgXk

太棒了！它起作用了，我只需要在图像 inside 上添加height: 100% div 保持比例。

我编辑了您的答案以添加第二个代码 sn-p。我在使用 Safari 时遇到了一些问题，它已修复为 #wrapper 设置 height: 100% 而不是 0。