[css] 모바일 웹 img 크기 조절 방법

* 추가

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes, target-densitydpi=medium-dpi" >

 

모바일페이지에서 이미지 크기를 가변적으로 변경하기

[ex]

http://cleannj.co.kr/m/

브라우저 창 크기 변경시 이미지 사이즈가 줄었다 늘었다하는걸 볼 수 있습니다.

[html]

<div class="visual">
<img src="/m/img/visual.jpg" />
</div>

[css]

.visual { width:100%; margin:0 auto; text-align:center; }
.visual img { max-width:100%; }

 

출처 - http://www.dweb.co.kr/bbs/board.php?bo_table=webstandard&wr_id=20

 

 

 

140410_letter.html

 

 

* 디바이스마다 확인

http://troy.labs.daum.net/ > http://bit.ly/1i3hc19 검색

 

<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

content : width [number | device-width], height [number | device-height], initial-scale [number], user-scalable [no | yes]

width : default 980, 범위 200 ~10,000 (숫자로 입력) 픽셀로 표시됨

height : width값에 따라 비유로 적용이 됨, 범위 223 ~ 10,000 (숫자로 입력) 픽셀로 표시됨

initial-scale : 웹페이지가 보일 때 최초 한번 적용되어서 보이는 비율, zoom in에 대한 범위를 다음 속성으로 지정할수 있다.

minimum-scale : default 0.25, 범위 0 ~ 10.0

maximun-scale : default 1.6, 범위 0 ~ 10.0

user-scalable : yes | no (no 속성은 스크롤 할때 input box에 enter가 입력 되는 것을 막음.

device-width : 기기 width 픽셀값

device-height : 기기 height 픽셀값