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

이미지 비율 맞추기

 

이미지 크기가 안맞아서 당황했던 적이 있다. 그래서 오늘은 이미지 비율을 맞추는 방법에 대해서 설명하려한다.

방법 1
▶ 너비와 높이 중 하나만 지정해주기
    : 너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 줄어듦
    ( 만약 다른 CSS에 영향을 받는다면 나머지에 auto 명시 )

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

 

방법2
▶ 너비와 높이 둘다 지정해주기 (1)
    : 너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우 너비와 높이는 auto로 두고
      max-width, max-height를 주어 크기 제한하기

<style>
.max-small {
    width: auto; height: auto;
    max-width: 100px;
    max-height: 100px;
}
</style>​

방법3
▶ 너비와 높이 둘다 지정해주기 (2)
    : 배경이미지로 주고 background-size: contain;를 적용하기

<style>
    .bg-small {
        width: 100px; height: 100px;
        background: url(배경이미지주소입력);
        background-repeat: no-repeat;
        background-size: contain;
    }
</style>​

contain => contain 값으로 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 이미지가 크게 조정됨.
                    이미지의 가로, 세로 비율은 유지한다.
cover => cover 값으로 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정함.                    가로, 세로 비율은 유지함. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같다.

 

이미지를 사용하다보면, 여백이 생기는데 해결방안은??

1. 이미지 요소에 vertical-align:top; 을 삽입한다 (vertical-align이 잘 안먹힐때가 많음)

2. 연속으로 이미지를 넣을 때(li속성으로 혹은 그냥 a태그로) 1번의 vertical-align:top을 넣어도 여백이 생길 경우가 있다
이럴 때는 이미지 부모 태그에 font-size:0; line-height:0; 를 삽입한다 (기존 인라인 요소들은 좌우에 미세하게 여백이 있는데 이건 margin:0px를 사용해도 제거가 불가능하다 그래서 인라인요소를 감싸는 부모요소에 font-size : 0을 주면 해결됨)

3. 그래도 되지 않는다면 해당 이미지 요소에 display: block;을 삽입한다