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

· 2014-10-18 (토) 02:22:18 · 2909 · 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개

2014-11-06 (목) 00:33:55
모바일에서 이미지의 가로폭만 조절 되고 세로는 조절되지 않습니다. 무엇이 잘못일까요?
댓글을 작성하시려면 로그인이 필요합니다.

팁게시판

6,077건

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

+
제목 글쓴이 날짜 조회
14-12-17 조회 1,703
14-12-15 조회 4,108
14-12-08 조회 1,750
14-12-05 조회 2,320
14-12-02 조회 1,790
14-12-01 조회 1,843
14-11-27 조회 1,636
14-11-25 조회 1,329
14-11-25 조회 3,619
14-11-21 조회 1,497
14-11-20 조회 4,839
14-11-19 조회 1,323
14-11-12 조회 1,611
14-11-04 조회 4,731
14-10-30 조회 2,842
14-10-25 조회 2,226
14-10-25 조회 5,478
14-10-25 조회 2,380
14-10-25 조회 3,442
14-10-22 조회 4,358
14-10-22 조회 2,173
14-10-22 조회 2,123
14-10-22 조회 5,977
14-10-18 조회 2,910
14-10-17 조회 1,244