"CSS 이미지 자동 크기조정"의 두 판 사이의 차이

2017년 6월 27일 (화) 01:20 기준 최신판

<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이므로 그 크기로 고정됨

@@ 6번째 줄: / 6번째 줄: @@
 ==예시==
-*예제: http://jmnote.com/css/img-auto-resize.php
+*예제: http://zetawiki.com/ex/css/img-auto-resize.php
 <source lang='html5'>
-<style type='text/css'>
+<style>
 img {
-  max-width:100%;
+	max-width: 100%;
-  width:400px;
+	width: 600px;
 }
 </style>
 <img src='http://upload.wikimedia.org/wikipedia/commons/9/96/GMT_France_2.png'>
 </source>
-:→ 창이 좁을 때: 그림의 max-width 값이 100% 이므로 창에 맞게 줄어듬
+:→ 창이 좁을 때: 그림의 max-width가 100%이므로 창에 맞게 유동적으로 줄어듬
-:→ 창이 넓을 때: width가 400px이므로 400px이 됨
+:→ 창이 넓을 때: 그림의 width가 600px이므로 그 크기로 고정됨
+<jsfiddle height='650'>oxrj7mm0</jsfiddle>
 ==같이 보기==
 *[[HTML img 태그]]
+*[[CSS 이미지 크기 비율에 맞게 줄이기]]
-==참고 자료==
+==참고==
 *http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
 *http://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css
 [[분류: CSS]]