편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
| 최신판 | 당신의 편집 | ||
| 1번째 줄: | 1번째 줄: | ||
;How to resize image proportionally with CSS | ;How to resize image proportionally with CSS | ||
;CSS 이미지 크기 비율에 맞게 줄이기 | ;CSS 이미지 크기 비율에 맞게 줄이기 | ||
==방법 1: 너비·높이 중 하나만 지정== | ==방법 1: 너비·높이 중 하나만 지정== | ||
*너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 | *너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 줄어듬 | ||
*다른 CSS에 영향을 받는 경우 명시해야 다른 한쪽은 auto로 명시하면 됨 | |||
< | <source lang='css'> | ||
.my-image { | |||
width: 150px; | |||
height: auto; | |||
} | |||
</source> | |||
;예시 | |||
<source lang='html5'> | |||
<style> | <style> | ||
.small1 { width: 100px; } | .small1 { width: 100px; } | ||
| 12번째 줄: | 19번째 줄: | ||
</style> | </style> | ||
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | |||
<img class='small1' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | <img class='small1' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | ||
<img class='small2' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | <img class='small2' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | ||
</ | </source> | ||
<jsfiddle height='420'>e3g4n6vh</jsfiddle> | |||
==방법 2: 너비·높이 중 둘 다 지정 | ==방법 2: 너비·높이 중 둘 다 지정== | ||
*너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우 | *너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우, '방법 1'로는 불가 | ||
*배경이미지로 주고 <code>background-size: contain;</code> 적용 | |||
*원본과 주어진 공간의 비율이 다른 경우 여백이 생김 | |||
< | |||
</ | |||
<source lang='html5'> | |||
<style> | <style> | ||
. | .small1 { width: 100px; } | ||
.small2 { width: 100px; height: 100px; } | |||
.small3 { | |||
width: 100px; height: 100px; | width: 100px; height: 100px; | ||
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png') no-repeat; | background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png') no-repeat; | ||
| 42번째 줄: | 41번째 줄: | ||
</style> | </style> | ||
<div class=' | <img class='small1' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | ||
</ | <img class='small2' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'> | ||
<div class='small3'></div> | |||
</source> | |||
<jsfiddle height='280'>xcLshxau</jsfiddle> | |||
==같이 보기== | ==같이 보기== | ||
*[[HTML img 태그]] | *[[HTML img 태그]] | ||
*[[CSS height 속성]] | |||
*[[CSS width 속성]] | *[[CSS width 속성]] | ||
==참고== | ==참고 자료== | ||
*http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css | *http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css | ||
[[분류: CSS]] | [[분류: CSS]] | ||