CSS 이미지 자동 크기조정

1 개요

flexible images

automatically resize images with browser size using css

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

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

2 예시

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

<style>
img {
	max-width: 100%;
	width: 600px;
}
</style>
 
<img src='http://upload.wikimedia.org/wikipedia/commons/9/96/GMT_France_2.png'>

→ 창이 좁을 때: 그림의 max-width가 100%이므로 창에 맞게 유동적으로 줄어듬

→ 창이 넓을 때: 그림의 width가 600px이므로 그 크기로 고정됨

3 같이 보기

• HTML img 태그
• CSS 이미지 크기 비율에 맞게 줄이기

4 참고

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