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 2019:

If you want to keep 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 {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Note that this solution not working in IE8 and below.