読者です 読者をやめる 読者になる 読者になる

Safariにて、imgのスタイルにposition: absoluteが指定されていた場合、width(もしくはheight)の片方を指定すると縦横比が崩れる

スポンサーリンク

imgのwidthまたはheightのどちらか片方を指定すると、縦横比を保ったまま画像サイズが変更されるのですが、Safari(2.0.4で確認)でposition: absoluteが指定されている場合には、指定した方のサイズしか変わらず縦横比が崩れてしまいます。

<!-- 下記は縦横比が保たれる。 -->
<img src="hoge.jpg" width="50"/>
<img src="hoge.jpg" style="position: relative" width="50"/>

<!-- 縦横比が保たれない。すなわち縦方向のサイズは変化しない。 -->
<img src="hoge.jpg" style="position: absolute" width="50"/>