HTMLのImgタグを使用し、属性のstyleを利用し、写真(jpegフォーマット)のサイズを変更し、
ウェブ上に掲載する方法について質問させてください。

まず問題が発生するコードを掲載します。
その後に、具体的な質問を記載させていただきます。

コード(html+Javascript)：

<html>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<body>
<!--実際には、以下の２行のどちらかをコメントアウトしてください。-->
<img id='myImg' src='img.jpg' style="height: 984px; width: auto;" />
<img id='myImg' src='img.jpg' style="height: 50%; width: auto;" />
</body>

<script type="text/javascript">
$('#myImg').click(function(e) {   
    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();

    var left = Math.round( (e.clientX - offset_l) );
    var top = Math.round( (e.clientY - offset_t) );

    alert("Left: " + left + " Top: " + top);
});
</script>
</html>

このコードでは、写真タグを使用し、写真(img.jpg)をウェブに掲載します。
掲載された写真のサイズ（ピクセルの位置情報）を知るためのコードは、
内に掲載してあります。

簡単に言えば、ウェブ上で写真をクリックしますと、クリックした位置情報がalertとして画面上に出ます。img.jpgのサイズは、特に問題ないと思いますが、ここでは3456 x 1968(px)を使用しています。

ここからが質問ですが、
自分の理解ですと、img.jpgの縦サイズ(1968)の半分で984pxですので、
下記の２つは属性は、同じものだと認識していました。

style="height: 984px; width: auto;"

style="height: 50%; width: auto;"

しかし、実際ウェブ上では、２つの写真のサイズは違ってしまっています。
写真のサイズを測りますと、984pxで指定した写真は正しいサイズをしています。

今回はこのサイズの写真を掲載しますが、
同じコードを使って、サイズが異なる写真を同様に処理したいと考えていますので、
なるべくなら数字指定(例えば984px)ではない方法で、正しく写真のサイズをリサイズしたいです。

正しく写真のリサイズを行いたいのですが、
写真サイズの具体的な指定ではない方法（例えば50%など）はありますでしょうか？
ご教授をお願いします。