CSS 이미지 크기 비율에 맞게 줄이기

How to resize image proportionally with CSS

CSS 이미지 크기 비율에 맞게 줄이기

CSS 종횡비 유지한 채로 이미지 크기 조정

1 방법 1: 너비·높이 중 하나만 지정

• 너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 줄어든다.

( 만약 다른 CSS에 영향을 받는다면 나머지에 auto 명시 )

<style>
.small1 { width: 100px; }
.small2 { height: 100px; }
</style>

<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'>

2 방법 2: 너비·높이 중 둘 다 지정 #1

• 너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우
• 너비·높이는 auto로 두고 max-width, max-height를 주어 크기 제한

<style>
.max-small {
    width: auto; height: auto;
    max-width: 100px;
    max-height: 100px;
}
</style>
 
<img class='max-small' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'>

3 방법 3: 너비·높이 중 둘 다 지정 #2

• 배경이미지로 주고 background-size: contain;를 적용하는 방법

<style>
.bg-small {
    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-size: contain;
}
</style>

<div class='bg-small'></div>

4 같이 보기

• HTML img 태그
• CSS width 속성
• CSS height 속성
• CSS max-width 속성
• CSS max-height 속성
• CSS background-size 속성
• CSS 이미지 비율유지, 최대크기로 crop

5 참고

• http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css