

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

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

コード(html+Javascript)：

[code]

    <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>
    
[/code]

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

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

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

[code]

    style="height: 984px; width: auto;"
    
    style="height: 50%; width: auto;"
    
[/code]

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

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

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


CC BY-SA 3.0
2016-08-15T03:45:00.570
28269
2016-08-15T03:45:00.570
11048
question
javascript html
HTMLのImgタグの属性(attribution)についての質問