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

How to resize image proportionally with CSS

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

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

• 너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 줄어듬
• 다른 CSS에 영향을 받는 경우 명시해야 다른 한쪽은 auto로 명시하면 됨

.my-image {
    width: 150px;
    height: auto;
}

예시

<style>
.small1 { width: 100px; }
.small2 { height: 100px; }
</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='small2' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/260px-Albert_Einstein_%28Nobel%29.png'>

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

• 너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우
• 원본이 주어진 공간과 비율이 다른 경우 여백이 생기는 것은 당연...
• 배경이미지로 주고 background-size: contain; 적용

<style>
.small1 { width: 100px; }
.small2 { width: 100px; height: 100px; }
.small3 {
    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>

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

3 같이 보기

• HTML img 태그
• CSS height 속성
• CSS width 속성

4 참고 자료

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