根据容器的高度和宽度计算图像的最佳尺寸

Question

If I have a container which has a fixed width of 500px and height of 500px and an image with a width of 600px and height of 1200px whats the best way to calculate the dimensions I need to have the image 'fit' within the container while preserving the aspect ratio of the image?

If the image were smaller, by both width and height of the container; do nothing.

Based on the example dimensions above I know the best dimensions for the image are:

Width = 250 Height = 500

But what is the calculation I need to perform to achieve this?

Answer 1

You have to first determine if it's the height or the width of the image is causing the shrinking of the image. Then based on that you determine aspect ratio of the w/h of the image. Then set the max value either height or width to 500 and multiply that by the aspect ratio to get the other number of the image.

In your example the aspect ration is 1/2, w/h and since you're shrinking the height to 500 the width should be 1/2 * 500 = 250 as the width.

Answer 2

JS:

 $('.myimg').css('max-height', '100%'); $('.myimg').css('max-width', '100%'); 

 .container { height: 500px; widtH: 500px; background: red; display: flex; align-items: center; justify-content: center; } .bggreen{ background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <img class="myimg" src="http://placehold.it/600x1200"> </div> <hr> <div class="container bggreen"> <img class="myimg" src="http://placehold.it/60x120"> </div> <hr> <div class="container"> <img class="myimg" src="http://placehold.it/120x60"> </div> <hr> <div class="container bggreen"> <img class="myimg" src="http://placehold.it/1200x600"> </div> 

It is much simple to use CSS Solution:

set img to max-height: 100%; and max-width: 100%; :

 .container { height: 500px; widtH: 500px; background: red; display: flex; align-items: center; justify-content: center; } .myimg { max-height: 100%; max-width: 100%; } .bggreen { background: green; } 

 <div class="container"> <img class="myimg" src="http://placehold.it/600x1200"> </div> <hr> <div class="container bggreen"> <img class="myimg" src="http://placehold.it/60x120"> </div> <hr> <div class="container"> <img class="myimg" src="http://placehold.it/120x60"> </div> <hr> <div class="container bggreen"> <img class="myimg" src="http://placehold.it/1200x600"> </div> 

Answer 3

If you want to display the image, use max-height:100%; width:auto max-height:100%; width:auto if your images are always vertical.

What this will do is make sure that your Image will always have the biggest height it can have (ie the same as the container it's in) while retaining it's width (= same AR, but a flexible size)

Answer 4

You can use image as the background of container div with background size fit to cover, that will help you to achieve it automatically.

 .container { height: 500px; width: 500px; background-size: cover; background-repeat: no-repeat; background-position: center; } 

 <div class="container" style="background-image: url('http://lorempixel.com/600/1200/cats/1/')"></div>