max-height AND max-width with CSS only

Question

First post for me here.

I'm using a div to crop thumbnail images all in the same proportions (180wx170h). I'm getting stuck when dealing with portrait as well as landscape images. If am using this which is fine for portrait style images:

.crop img {max-height:170px; width:auto} 

.. and is fine for landscape style images:

.crop img {max-width:180px; height: auto;} is fine for landscape style images.  

So I basically want to crop the sides if landscape and top/bottom if portrait. Kind of like a prioritized max-height and max-width.

I know this could be done easily with PHP but I really only know CSS so that would be my first preference.

I need to maintain the aspect ratio of the image.

Answer 1

Edit 2019:

If you want to keep <img> tags, please look into object-fit css property, support of it across browsers is quite good.

And if you want to keep aspect ratio on width change, try padding-hack.

---

As I understand you have blocks 180x170 px and you want to fill them completely with images. Try to move images to background and use background-size:cover.

Demo http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Note that this solution not working in IE8 and below.

Answer 2

the solutions after going through loads of other 'solutions'

max-width:100%;
max-height:100%;
height: auto;
width:auto;

Answer 3

Edit: I have improved the solution, see here: https://stackoverflow.com/a/34774905/1663572

---

I'm using this solution, which i found, when I was trying to fit and center images into squares (or whatever). It is brilliant in combination, where you set padding-bottom and height 0 to its container - that makes it responsive with fixed ratio.

Works in IE9 and higher. For IE8 and below some CSS hacks needed.

HTML

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all\0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Try it here: http://jsfiddle.net/thiemeljiri/uhdm4fce/4/

Notice: If using bootstrap change the class .container to something else.

Answer 4

You could try

.crop img {max-height:170px; max-width:180px;}

Since max-height and max-width are maxima, it should work. The browser will make the image as big as possible, without going over your dimensions.

Note that this is untested, but based on this W3Schools page.

Hope this helps!!

Answer 5

You have the answer in you!

Try:

.crop img {max-height: 170px; max-width: 180px;}

Answer 6

This might be a bit late, but I found wrapping the said image in <figure> scales the image keeping the aspect ratio.