web-dev-qa-db-ja.com

HTMLで元のサイズの50％に画像のサイズを変更

HTMLで画像のサイズを変更しようとしています。幅は314ピクセル、高さは212ピクセルです。 50％にサイズ変更したい...

しかし、これを使用すると、ハーフサイズの画像ではなく、より大きな画像が得られます。

<img src="image.jpg" width="50%" height="50%" />

私は何を間違えましたか？ありがとう

<html>
    <head>
    <title></title>
    </head>    
    <body>
        <div>
        <img src="image4.png" width="50%" height="50%"/>
        </div>
    </body>
</html>

以下のjqueryを使用して上記の問題を解決しました。

$(document).ready(function(e) {
        var imgs = document.getElementsByTagName('img');
        var imgLength = imgs.length;

        for(var i=0; i<= imgLength-1;i++){

            var imgWidth = imgs[i].clientWidth;
            var imgHeight = imgs[i].clientHeight;

            $('img').eq(i).attr({width:imgWidth/2, height: imgHeight/2});

            console.log(imgWidth);
        }

        console.log(imgLength); 

    });
jqueryhtmlimage
49
Sam

ここで何も間違ったことはしませんでした。画像サイズを上書きする他のことはすべて行います。

この動作を確認できます fiddle 。

そして this fiddle では、%を使用して画像サイズを変更しましたが、動作しています。

また、このコードを使用してみてください：

<img src="image.jpg" style="width: 50%; height: 50%"/>​

こちら フィドルの例。

71
Asif

パーセンテージ設定では、元の画像サイズは考慮されません。 w3schools から：

HTML 4.01では、幅はピクセル単位または含まれる要素の％単位で定義できます。 HTML5では、値はピクセル単位でなければなりません。

また、同じソースからの良い実践アドバイス：

ヒント：高さと幅の属性を使用して大きな画像を縮小すると、ユーザーは大きな画像をダウンロードする必要があります（ページ上で小さく見えても）。これを回避するには、ページで使用する前にプログラムでイメージのサイズを変更します。

9
Skippy le Grand Gourou

これはcss3でも実行できます。これを試して：

.halfsize {
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

<img class="halfsize" src="image4.jpg">
  • ブラウザの互換性の影響を受ける
7
Nalan Madheswaran