max-height AND max-width with CSS only
the solutions after going through loads of other 'solutions'
max-width:100%;
max-height:100%;
height: auto;
width:auto;
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.