【问题标题】：div aspect ratio by parent width按父宽度的 div 纵横比
【发布时间】：2014-02-19 02:35:06
【问题描述】：

我有一个宽度为 723，高度为 425 的图像，我需要 div.col-75-liquid 元素宽度来获得图像宽度和高度的纵横比，因此当浏览器调整我的滑块大小时将保持它的纵横比我必须在 jquery 中而不是在 css 中执行此操作。我如何在 jquery 中做到这一点？谁能给我一个具有该纵横比的 div 元素的示例，col-75-liquid 是有弹性的，所以它会增长和缩小

当我有了纵横比后，我可以在浏览器调整大小时重新创建我的控件并为我的控件设置新的宽度和高度

<div class="col-75-liquid">
    <div class="img">
    </div>
</div>

【问题讨论】：

是你的div 去hug 图像，还是基本上就像图像周围的border？你只是希望它与图像的纵横比相同，对吗？我可以向您展示一个解决方案，但您必须使用 window resize 处理程序。
这是一个只提供 CSS 解决方案的页面。wellcaffeinated.net/articles/2012/12/10/…
使用%'s 而不是pxs
是的，我必须使用窗口调整大小，因为外部父大小会发生变化。图像不会很大，它不适合整个窗口，它位于流动或灵活的中心 div 内，我只是希望我的控件能够响应。是的，我希望它保持 723（宽度）/425（高度）的纵横比
仅从您的问题很难判断，但我认为您正在查看内在比率：alistapart.com/article/creating-intrinsic-ratios-for-video

标签： javascript jquery css

【解决方案1】：

好吧，如果没有你的 CSS 和诸如此类的东西，这将在调整窗口大小时将父 div 的大小调整为图像尺寸的 150%。这将保持方面，因为您将父级与图像本身进行比较。如果您希望我进一步扩展，请告诉我。

HTML：

<div id="wrapper">
    <img id="slide1" src="whatever.jpg" />
</div>

jQuery：

$(window).on('resize', function() {
    $('#wrapper').height($('#slide1').height() * 1.5);
    $('#wrapper').width($('#slide1').width() * 1.5);
});

http://jsfiddle.net/SinisterSystems/fJpwf/2/

我没有做任何响应式操作，但如果您的其他 CSS（或什至其他 jQuery 函数）正在控制它，它会做出响应式操作。如果你愿意，我可以举另一个例子。

编辑：

没听懂问题。

试试这样的：

http://jsfiddle.net/SinisterSystems/fJpwf/3/

<div class="wrapper">
    <img class="slide1" src="image.jpg" />
</div>

$(window).on('resize', function() {
    $('.wrapper').height($('.wrapper').width() * .58);    
});

这将使包装器保持图像的纵横比，不管它是什么大小。

换句话说，如果您知道父元素的width，请执行以下操作：

$('.parent').height($('.parent').width() * .58);

如果您知道高度并需要宽度，请使用：

$('.parent').width($('.parent').height() * 1.7);

【讨论】：

那根本行不通。假设根据父母的宽度保持图像的纵横比，所以我需要计算比例并获取宽度和高度，然后重新创建控件
您希望您的 IMAGE 继承 DIV 的纵横比吗？根据您的问题，这没有任何意义，因为您说您有一个static sized 图像...因为如果您的图像是723px x 425px，这将使它们周围的容器具有完全相同的纵横比（1.7 )。
我希望图像根据父级宽度保持其纵横比，因此父级可以是任何大小，但保存图像的 div 会变大或变小并保持其纵横比
哦，简单。一秒钟。
忘记保存图像的 div 想象 div.child 具有宽度和高度的纵横比，当您调整父级的大小时，它会更改子级的大小