One of the fundamental building blocks of responsive web design is ensuring images sit within their containers by a simple CSS rule img {max-width:100%;} .
Generally, this works splendidly. But if you’re “reponsifying” an old site, you might find that the authors included the images’ heights and widths as attributes in the HTML.
In this case, the img {max-width:100%;} can wreck the aspect ratio when the image is squeezed, as the width is forced by the CSS to shrink, but the height is still set in the HTML. See my photo of the most overloaded truck in the world and narrow the browser window.
This is easily cured without trawling through the markup and removing HTML height attributes. Simply extend your img CSS so it reads img {max-width:100%; height:auto;} and aspect ratio is preserved.
You may also find that you need to review every page with in your site and remove the inline widths because in a lot of browsers these values override the CSS.
In this case you also have the option of including some jQuery to help get you by until all of the site images are fixed.
$('img').removeAttr('width&').removeAttr('height');
Of course this will affect every single image on your site so you might want to specify a selector
$('#content img').removeAttr('width').removeAttr('height');Or certain HTML elements
$('article img').removeAttr('width').removeAttr('height');