60

HTML で画像のサイズを変更しようとしていますが、幅 314px、高さ 212px です。サイズを 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); 

    });
4

4 に答える 4

81

ここでは何も悪いことをしていません。画像サイズをオーバーライドしている他のことです。

この作業フィドルを確認できます。

このフィドルでは、を使用して画像サイズを変更しました%が、機能しています。

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

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

これがフィドルの例です。

于 2012-06-20T10:31:25.563 に答える
11

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

HTML 4.01 では、幅はピクセルまたは含まれる要素の % で定義できました。HTML5 では、値はピクセル単位である必要があります。

また、同じ情報源からの良い実践アドバイス:

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

于 2013-10-01T16:30:05.693 に答える