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

1 개요

How to resize image proportionally with CSS
CSS 이미지 크기 비율에 맞게 줄이기

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

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

2 예시

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

3 같이 보기

4 참고 자료

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