画像ギャラリーを作っています。これは画像の HTML です。
<div style="width: 84%; height: 100%; float: left; text-align: center;"><img
id="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 -->
画像が正方形の場合、または幅が高さよりも大きくない場合にうまく機能します。ただし、幅が広すぎると壊れます。画像オーバーフローの例:
Javascript 内にオーバーフローがあるかどうかを確認する方法はありますか? このようなもの:
image.setAttribute('height', '100%')
image.removeAttribute('width')
if (image.isOverflowing()) {
image.setAttribute('width', '100%')
image.removeAttribute('height')
}
さらに良いことに、画像を適切にスケーリングする方法はありますdiv
か?