CSS 이미지 자동 크기조정

1 개요

flexible images

CSS 이미지 자동 크기조정, 너비조정

• 웹브라우저 폭이 넓을 때는 지정한 크기로, 좁을 때는 그에 맞추어 자동으로 크기가 조정됨

2 예시

• 예제: http://jmnote.com/css/img-auto-resize.php

<style type='text/css'>
img {
  max-width:100%;
  width:400px;
}
</style>

<img src='http://upload.wikimedia.org/wikipedia/commons/9/96/GMT_France_2.png'>

→ 창이 좁을 때: 그림의 max-width 값이 100% 이므로 창에 맞게 줄어듬

→ 창이 넓을 때: width가 400px이므로 400px이 됨

3 같이 보기

• HTML img 태그

4 참고 자료

• http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
• http://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css