<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<!-- language: lang-html -->
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<!-- end snippet -->
<!-- begin snippet: js hide: false -->
<!-- language: lang-css -->
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<!-- language: lang-html -->
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<!-- end snippet -->
This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).
[1]: http://i.stack.imgur.com/aEEkn.png
