Images losing original aspect ratio

I have an image frame that needs to fit variable images without losing their original aspect ratio, currently every image just stretches to fit the frame. Is there a good solution to this problem? thanks in advance

A option is to not apply the CSS property width but apply the CSS property-and-value pairs max-width: 100%; and height: auto; instead, as shown in the example below:

Before:

<img id="dynamic-image" src="images/example.png" style="width: 300px; height: 200px;">

After:

<img id="dynamic-image" src="images/example.png" style="max-width: 100%; height: auto;">

Perhaps the following article is of some help: OL Resource Center