I am making an image gallery. This is the HTML for the image:\[code\]<div style="width: 84%; height: 100%; float: left; text-align: center;"><imgid="mainimage" style="height: 100%;" src="http://www.gymheroapp.com/workouts/img/spinner.gif"/></div><!-- Loading spinner is temp image, will be replaced by Javascript later -->\[/code\]It works fine when the image is square, or the width is not too much more than the height. It breaks when the width is too great, though. Example of image overflowing:
Is there a way I could check whether there is overflow within my Javascript? Something like this:\[code\]image.setAttribute('height', '100%')image.removeAttribute('width')if (image.isOverflowing()) { image.setAttribute('width', '100%') image.removeAttribute('height')}\[/code\]Even better, is there any way to scale the image properly but fit it withing the containing \[code\]div\[/code\]?