front/JS

[JQuery] jquery로 각각의 이미지의 가로길이에 따라서 width를 변경

배고파요 2022. 5. 11. 14:17
728x90

이미지가 들어갈 공간의 가로길이가 100px 인데
만약, 내가 넣으려고 하는 이미지의 가로 크기가 100px 를 넘는다면?

 

근데, 모든 이미지가 100px를 넘는 것은 아니고,

어떤 이미지는 넘을 때도 있고, 어떤 이미지는 안 넘을 때도 있다면??

 

var wid = 100; //이미지가 들어갈 공간의 가로 길이  :::  100px

$("#img_id").load(function(){ //이미지가 모두 로드 되고 나서 가로 길이를 구해야 함.
    $("#img_id").each(function(){ //이미지의 id 값이 모두 같기 때문에 each를 사용함.
        var img_wid = $(this).width(); //each 를 사용했기 때문에 각각을 this로 씀.
        if(img_wid > wid){ //이미지의 가로길이가 100px이 넘는 것만 width:100%로 맞춤.
            $(this).css("width", "100%"); 
        }
    });
});
728x90