0

たとえば、たくさんの画像があり、すべての画像の元の幅は 100px ですが、元の高さは異なります。これらの画像の元の高さに基づいて高さ属性を自動的に追加するにはどうすればよいですか。そのような

<img src="picture.jpg" width="100" height="132">
<img src="picture.jpg" width="100" height="45">
<img src="picture.jpg" width="100" heighst="321">
<img src="picture.jpg" width="100" height="136">
<img src="picture.jpg" width="100" height="214">
......

これを試してみて、最初に各画像の元の高さを取得しようとしましたが、

$(document).ready(function() {
$items = $('img');
$.each($items,function(k, v){
    console.log(v.naturalHeight);
    });
  });

うまくいきません

これは時々機能します

 $items = $('img');
    $.each($items,function(k, v){

        $(this).load(function(){

            console.log($(this)[0].naturalHeight);
            $(this).attr('height', $(this)[0].naturalHeight);

        });
    });

問題は、スクリプトを実行する前に、すべての画像が読み込まれたことを確認するにはどうすればよいかということです。

4

4 に答える 4

0

高さを指定しない場合、画像は元の比率を維持します。

それ以外の場合は、次のように JavaScript で実行できます。

function loaded() {
    var img = document.getElementById("imgID");
    img.style.height = img.height;
}

編集：画像にIDがない場合：

function loaded() {
    var images = getElementsByTagName(img);

    for(i = 0; i < images.length; i++) {
        images[i].style.height = img.height;
    }
}
于 2013-11-04T13:20:59.073 に答える
-1

高さ属性を追加する必要はまったくなく、幅のみを追加すると、画像が自動的にスケーリングされます。

于 2013-11-04T13:16:45.600 に答える