Javascript 按父宽度划分的div纵横比

我有一幅宽723，高425的图像，我需要div.col-75-liquid元素的宽度来获得图像的宽高比，所以当浏览器调整大小时，我的滑块将保持它的宽高比，我必须在jquery中而不是css中这样做。在jquery中如何实现这一点？有人能给我举一个长宽比的div元素的例子吗，col-75-liquid是有弹性的，所以它会增长和收缩

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

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

---

好吧，如果不使用CSS之类的工具，在调整窗口大小时，这会将父div的大小调整为图像尺寸的150%。这将保持外观，因为您正在将父对象与图像本身进行比较。如果您希望我进一步扩展，请告诉我

HTML:

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

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

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

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

我没有做任何响应性的事情，但是如果您的其他

CSS

（或者甚至其他jQuery函数）正在控制它，它会做出响应性的行为。如果你愿意，我可以再举一个例子

编辑： 我不明白这个问题

试试这样的方法：

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

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

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

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

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

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

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

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

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

---

你的

div

是要拥抱图像，还是像图像周围的

边框一样？你只想让它和图像的纵横比一样，对吗？我可以向您展示一个解决方案，但您必须使用
窗口大小调整
处理程序。这是一个只提供CSS解决方案的页面。使用
%
而不是
pxs
是的，我必须使用窗口大小调整，因为外部父级大小会发生变化。图像不会太大，它不适合整个窗口，它在一个中心div内，是液体的或灵活的，我只是希望我的控制能够响应。是的，我希望它保持723（宽）/425（高）的纵横比，单从你的问题很难判断，但我认为你在看内在的比例：这根本不起作用。它假设根据父宽度保持图像的纵横比，所以你需要计算这个比值，得到宽度和高度，然后重新创建控件你想让你的图像继承DIV的纵横比吗？基于你的问题，这是没有意义的，因为你说你有一个
静态大小的
图像。。。因为如果您的图像是
723px 425px
，这将使它们周围的容器具有完全相同的纵横比（
1.7
）。我希望图像根据父宽度保持其纵横比，这样父图像可以是任意大小，但容纳图像的div变大或变小，并且保持其纵横比非常简单。一秒钟。忘记保存图像的div。想象div.child具有宽度和高度的纵横比，当您调整父对象的大小时，它会更改子对象的大小