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 180×170 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.