테스트 사이트 - 개발 중인 베타 버전입니다

모바일 해상도에 맞게 이미지 출력

· 11년 전 · 2665 · 1

작업을 하다 보면 .. 아직도 많은 것이 부족하다는 것을 느끼게 할 경우가 있어요

 

 

모바일 해상도에 맞게 이미지를 출력 해주는 소스에요

 

$(document).ready(function(){
    $(window).load(function(){
        $("img").each(function(){
            var oImgWidth = $(this).width();
            var oImgHeight = $(this).height();
            $(this).css({"max-width":oImgWidth+"px", "max-height" : oImgHeight+"px", "width":"100%", "height":"100%"});
        });
    });
}); 

 

 

위 소스는 제가 만든것이고요.  원하는 곳에 이 소스를 넣으면 되는데요.

간단하게 설명해서 모든 이미지에 width, height를 가져온 후 해상도다 크면 100%이고 아니면 자기 사이즈로 출력하라인데요

반응형에 관련된 내용이네요.

 

 

 

이 점에 대해 정확한 것은 아래 url로 가시면 되요.


출처 : http://www.erzsamatory.net/86 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

모바일에서 이미지의 가로폭만 조절 되고 세로는 조절되지 않습니다. 무엇이 잘못일까요?

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기