Scale image to fit a bounding box
Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container:

img {
  max-width: 100%;
  max-height: 100%;
}
Exa...
https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
Stack Overflow
Note: Even though this is the accepted answer, this other answer is more accurate and is currently supported in all browsers if you have the option of using a background image.

Edit 2: In the modern age, using object-fit might be an even better solution: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

No, there is no CSS only way to do this in both directions. You could add

.fillwidth { min-width: 100%; height: auto; }

To the an element to always have it 100% width and automatically scale the height to the aspect ratio, or the inverse:

.fillheight { min-height: 100%; width: auto; }

to always scale to max height and relative width. To do both, you will need to determine if the aspect ratio is higher or lower than it's container, and CSS can't do this.

The reason is that CSS does not know what the page looks like. It sets rules beforehand, but only after that it is that the elements get rendered and you know exactly what sizes and ratios you're dealing with. The only way to detect that is with JavaScript.

Although you're not looking for a JS solution I'll add one anyway if someone might need it. The easiest way to handle this with JavaScript is to add a class based on the difference in ratio. If the width-to-height ratio of the box is greater than that of the image, add the class "fillwidth", else add the class "fillheight".

$('div').each(function() { var fillClass = ($(this).height() > $(this).width()) ? 'fillheight' : 'fillwidth'; $(this).find('img').addClass(fillClass); });

.fillwidth { width: 100%; height: auto; } .fillheight { height: 100%; width: auto; } div { border: 1px solid black; overflow: hidden; } .tower { width: 100px; height: 200px; } .trailer { width: 200px; height: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tower"> <img src="http://placekitten.com/150/150" /> </div> <div class="trailer"> <img src="http://placekitten.com/150/150" /> </div>

This example to stretch the image proportionally to fit the entire window. An improvisation to the above correct code is to add $( window ).resize(function(){});

function stretchImg(){ $('div').each(function() { ($(this).height() > $(this).find('img').height()) ? $(this).find('img').removeClass('fillwidth').addClass('fillheight') : ''; ($(this).width() > $(this).find('img').width()) ? $(this).find('img').removeClass('fillheight').addClass('fillwidth') : ''; }); } stretchImg(); $( window ).resize(function() { strechImg(); });

There are two if conditions. The first one keeps checking if the image height is less than the div and applies .fillheight class while the next checks for width and applies .fillwidth class. In both cases the other class is removed using .removeClass()

Here is the CSS

.fillwidth { width: 100%; max-width: none; height: auto; } .fillheight { height: 100vh; max-width: none; width: auto; }

You can replace 100vh by 100% if you want to stretch the image with in a div. This example to stretch the image proportionally to fit the entire window.

I have used table to center image inside the box. It keeps aspect ratio and scales image in a way that is totally inside the box. If the image is smaller than the box then it is shown as it is in the center. Below code uses 40px width and 40px height box. (Not quite sure how well it works because I removed it from another more complex code and simplified it little bit)

.SmallThumbnailContainer { display: inline-block; position: relative; float: left; width: 40px; height: 40px; border: 1px solid #ccc; margin: 0px; padding: 0px; } .SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } .SmallThumbnailContainer tr { height: 40px; text-align: center; } .SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px; } .SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0"> <tr> <td> <img src="https://www.gravatar.com/avatar/bf7d39f4ed9c289feca7de38a0093250?s=32&d=identicon&r=PG" width="32" height="32" alt="OP's SO avatar image used as a sample jpg because it is hosted on SO, thus always available" /> </td> </tr> </table>

Note: the native thumbnail size in this snippet is 32px x 32px, which is smaller than its 40px x 40px container. If the container is instead sized smaller than the thumbnail in any dimension, say 40px x 20px, the image flows outside the container in the dimensions that are smaller than the corresponding image dimension. The container is marked by a gray 1px border.