[解決済み] HTMLで写真の比率を崩さずに幅と高さをパーセンテージで指定する

質問

幅と高さに <img> 属性で、幅と高さをパーセントで指定することはできますか？

まあ、そうしてみるとリサイズはされるのですが、画質が歪んでいるように見えるので、当然といえば当然なのでしょう。

以下は、固定属性を使用した私のマークアップの例です。

<img src="#" width="346" height="413">

さて、これをパーセンテージで半分に縮小してみます。

<img src="#" width="50%" height="50%">

とは全く違うものが出てくるんです。

<img src="#" width="173" height="206.5">

2番目の例と3番目の例で視覚的に顕著な違いがあるので、根本的にパーセントマークアップか何かを間違えているのだと思います。

どのように解決するのか？

注意事項 として直接パーセンテージを提供することは無効です。 <img> width または height 属性は、HTML 4.01 を使っているのでなければ ( 現在の仕様 , 旧仕様 と この回答 をご覧ください）。とはいえ、ブラウザは後方互換性をサポートするために、このような動作を許容することがよくあります。

2番目の例で示されたパーセンテージの幅は、実際には <img> が入っており、画像の実際のサイズではありません。 例えば、次のようなマークアップがあるとします。

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

出来上がった画像は、横500px、縦300pxの大きさになります。

jQuery リサイズ

画像を横幅の50％に縮小する場合、jQueryのスニペットを使用することで可能です。

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

ただ、最初にheight/width = 50%の属性を外しておいてください。