CODEWITHSUNDEEP
javascriptimagemath
CLiown
CLiown

Reputation: 13843

Calculate best dimensions for image based on height and width of container

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?

Upvotes: 0

Views: 2617

Answers (4)

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 1

Vibhanshu
Vibhanshu

Reputation: 542

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>

Upvotes: 0

Avitus
Avitus

Reputation: 15958

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.

Upvotes: 1

Luca Kiebel
Luca Kiebel

Reputation: 10096

If you want to display the image, use 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 (i.e. the same as the container it's in) while retaining it's width (= same AR, but a flexible size)

Upvotes: 1

Related Questions