CODEWITHSUNDEEP
javascriptjquerycss
ONYX
ONYX

Reputation: 5859

div aspect ratio by parent width

I have an image which is 723 in width and 425 in height and I need the div.col-75-liquid element width to have that aspect ratio of the width and height of my images so when the browser is resized my slider will keep it aspect ratio I have to do this in jquery not in css. How do I do this in jquery? can someone make me an example of a div element that has that aspect ratio, the col-75-liquid is elastic so it will grow and shrink

When I have the aspect ratio I can then recreate my control on browser resize and set the new width and height for my control

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

Upvotes: 0

Views: 430

Answers (1)

Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Well, without your CSS and whatnot, this will resize the parent div to 150% of the image'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 like me to expand further.

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/

I didn't do anything responsive, but it would act responsively if your other CSS (or even other jQuery functions) are controlling that. I can throw another example if you'd like.

EDIT:

Didn't understand the question.

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

This will make the wrapper maintain the aspect ratio of your image despite what size it is.

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

Upvotes: 1

Related Questions