CODEWITHSUNDEEP
javascriptjqueryimagemathaspect-ratio
StealthRT
StealthRT

Reputation: 10542

Keeping image ratio for its height using jQuery

Hey all i am trying to automatically get the height for an image. I can not seem to find any jQuery to do this?

What i am looking to do is something like it does in photoshop:

If the image was:

Width  = 778
Height = 346

And i want to change the width to 380 then typing in 380 into the Width textbox in photoshop changes the height to 169:

enter image description here

width  = 380
height = 169

How can i mimic this in Jquery?

Upvotes: 0

Views: 276

Answers (2)

arunlalam
arunlalam

Reputation: 1838

How about something like this

http://jsfiddle.net/Njf5k/1/

HTML

<label>Original Width</label>
<input type="text" id="originalWidth" class="original" value="778" />
<br />
<label>Original Height</label>
<input type="text" id="originalHeight" class="original" value="346" />
<label>New Width</label>
<input type="text" id="newWidth" class="new" />
<br />
<label>New Height</label>
<input type="text" id="newHeight" class="new" />

jQuery

Its based on the fact that width/height remains a constant.

$('#newWidth').keyup(function () {
    $('#newHeight').val(Math.round(
    ($('#originalHeight').val() * $('#newWidth').val()) / $('#originalWidth').val()));
});

Upvotes: 1

Moshe Harush
Moshe Harush

Reputation: 11

why you need this? if you just set one of attrbiute like height/width inline the html img element you see the image in ratio automaticly.

Upvotes: 0

Related Questions