首页 文章

div宽高比乘父宽度

提问于
浏览 次
0

我有一个宽723，高425的图像，我需要div.col-75-liquid元素宽度才能得到我的图像宽度和高度的宽高比，所以当浏览器调整大小时我的滑块会保留它纵横比我必须在jquery而不是css中这样做 . 我如何在jquery中执行此操作？有人能让我举一个有长宽比的div元素的例子，col-75液体是弹性的，所以它会变长和缩小

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

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

1 回答

  • 1

    Well, without your CSS and whatnot ，这会将父div重新调整为图像的150％'s dimensions when the window is resized. This will maintain aspect, because you are comparing the parent to the image itself. Let me know if you' d像我一样进一步扩展 .

    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函数）控制它，它会响应 . 如果你愿意，我可以举出另一个例子 .

    编辑：

    不明白这个问题 .

    Try something like this:

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

    这将使包装器保持图像的纵横比，尽管它的大小 .

    In other words, if you know the width of your parent element, do something like:

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

    If you know the height and need the width, use:

    $('.parent').width($('.parent').height() * 1.7);
    回复于

相关问题