Sometimes our images are coming from a 3rd party (sometimes further away) content source, and so can be a challenge to render on our page in a common way among differently sized images coming from elsewhere. Let's say we want to normalize all our images to a 100px square, regardless of the source size. Using CSS, we could just resize all images into a square like this:
img {
height: 100px;
width: 100px;
}
But this doesn't really work unless all our source images are also square, otherwise you'll be forcing your images into a non-native aspect ratio, and you'll be left with images that look like they are from an old spaghetti western movie (squished into being super tall and skinny). We don't want this, but we do want to keep our images as consistent as we can. So, instead of doing this, we want to just force our images to only ONE specific dimension, and leave the other to scale normally. Something like this:
.thumbnail {
overflow: hidden;
width: 100px;
height: 100px;
}
.thumbnail img {
width: 100px;
height: auto;
max-height: 100px;
-ms-interpolation-mode: bicubic;
}
Notice that I've added a "thumbnail" container around our images for clipping purposes. Our thumbnail will be the actual dimensions we want to show to the user, in this case a 100px square, and set the overflow to hidden so any image that happens to be bigger than this will not be shown, resulting in what seems to the user to be perfect 100px square images.
Our img styling now is set to a static width of 100px, and I'm going to set height to auto, which tells the browser to scale the height to whatever is appropriate based on the static width we defined and the aspect of the original. In addition, I've added here extra instruction for old IE browsers to scale images in a very specific way - in fact, I add this to my reset stylesheet when I'm building any site. Here's some more info on this from CSS-Tricks.
Demo
(Note I added a yellow outline, and a white background on each thumbnail to show where the 100px square clip is.)
You can see a few different cases here, all of which should show images that are sized down AND cropped to our defined box, while retaining their original aspect ratio; if the source is a rectangle, and if it's wider than it is tall, there's a chance it will not fill our full 100px of height. I think this is acceptable, and I've found it to be rare enough that it doesn't seem to be an issue.
The other thing you may want to consider is adding a default "no image found" background image onto .thumbnail for when a broken img occurs - this way, your users will still see something semi-nice and consistent with the other images on the page (some browsers show a broken image icon, others do not).
Placeholder images here are from lorempixel.comNote: If you'd like to vertically position your images (e.g. in the 2nd case here, you could middle align your image instead of the default top alignment), you can do so by setting "vertical-align: middle" on your img, and "line-height: 100px" to .thumbnail.
