I need to make this image stretch to the maximum size possible without overflowing it's <div>
or skewing the image.
I can't predict the aspect-ratio of the image, so there's no way to know whether to use:
<img src="url" style="width: 100%;">
or
<img src="url" style="height: 100%;">
I can't use both (i.e. style="width: 100%; height: 100%;") because that will stretch the image to fit the <div>
.
The <div>
has a size set by percentage of the screen, which is also unpredictable.
Best Answer
Update 2016:
Modern browser behave much better. All you should need to do is to set the image width to 100% (demo)
Since you don't know the aspect ratio, you'll have to use some scripting. Here is how I would do it with jQuery (demo):
CSS
HTML
Script