I am trying to make a "flip book" using jquery and have started with a plugin that I bought.
I customized the JS to get the book to resize to 100% of the window when the browser is resized, and set max sizes because I do not want the images to grow larger than their original size.

With all that said, I have been trying to get the images to retain their aspect ratio when resized. I looked around online but couldn't find anything to help me with this.
Does anyone have any ideas on how to acplish this? Please let me know if you need more info or clarification.

EDIT:
The book element is resized with JS up to the max size of the images.
When the book is resized to anything smaller than its max size, the book's height and width bee 100% of the window.
I need some JS to make the book keep its aspect ratio.

EX- window is resized to be very wide (large width) but very short (small height).
Currently the book will stretch and fill the very large width which distorts the image because the height is too small.

How do I make the width scale down to pensate for the small height (and vice versa)?
Thanks to everyone in advance!

Here is the Fiddle

#mybook {
margin:0 auto;
}
body {
overflow:hidden;
}
img {
max-height:300px;
max-width:300px;
}

I am trying to make a "flip book" using jquery and have started with a plugin that I bought.
I customized the JS to get the book to resize to 100% of the window when the browser is resized, and set max sizes because I do not want the images to grow larger than their original size.

With all that said, I have been trying to get the images to retain their aspect ratio when resized. I looked around online but couldn't find anything to help me with this.
Does anyone have any ideas on how to acplish this? Please let me know if you need more info or clarification.

EDIT:
The book element is resized with JS up to the max size of the images.
When the book is resized to anything smaller than its max size, the book's height and width bee 100% of the window.
I need some JS to make the book keep its aspect ratio.

EX- window is resized to be very wide (large width) but very short (small height).
Currently the book will stretch and fill the very large width which distorts the image because the height is too small.

How do I make the width scale down to pensate for the small height (and vice versa)?
Thanks to everyone in advance!

Here is the Fiddle

#mybook {
margin:0 auto;
}
body {
overflow:hidden;
}
img {
max-height:300px;
max-width:300px;
}

• javascript
• jquery
• html
• resize

• Fiddle: jsfiddle/bpo29/NRAd6/7 – Brett Commented Feb 27, 2014 at 22:09
• Resize the preview window in the fiddle to see it lose it's aspect ratio – Brett Commented Feb 27, 2014 at 22:10

3 Answers 3

Look at this code: http://ericjuden./2009/07/jquery-image-resize/

$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
}); 

Or you could do it with css:

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
    style="max-height: 100%; max-width: 100%">
</div>

There is not really enough technical information in your question to be able to give you a good answer, but this is typically a problem that can be solved using CSS. It shouldn't require any JS/jQuery.

The tag naturally keeps the aspect ratio of the image if you set something like:

img {
    width: 100%;
    height: auto;
}

Alternatively, you could set the image as a background image and use the CSS property

.image {
    background-size: contain;
}

to make sure the image uses the most of the available width and height.

As I see, you are resizing with JavaScript the container div of the images. So, you can set the following CSS to make the image always fit in that div and maintain their aspect ratio.

img {
    max-height:100%;
    max-width:100%;
}

Here is a fiddle.