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 land

Answer 1

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 2

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 3

You have the answer in you!

Try:

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

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

the solutions after going through loads of other 'solutions'

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

Answer 6

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