javascript - 按父宽度划分的 div 纵横比

Question

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

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

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

Answer 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);    
});

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

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

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

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

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