画像ファイルをページの固定位置に表示したい。
次のコードを書きました。
<style>
.hovering-image{
position: fixed;
left: 70%;
top:20%;
height: 20%;
width 10%;
}
</style>
<body>
<div class="hovering-image">
<img src="whatever.jpg">
</div>
</body>
ただし、ウィンドウのサイズが変更されると、イメージが引き伸ばされて縦横比が変化します。画像を固定位置に表示し、ウィンドウのサイズを変更しても歪むことなく拡大縮小するより良い方法はありますか?