(CSS3-반응형) 종횡비값을 유지하며 background-image 표현하기

웹을 제작하는데 있어서 반응형 웹(Responsive)은 기본이 된 만큼 그에 따른 CSS스킬도 중요해졌습니다.

 

<img>태그를 사용한다면 'width: 100%; height: auto;' 로도 해상도에 따라 간단하게 종횡비 유지가 가능하지만

상황에 따라 <img>태그를 사용하지 못하는 경우가 발생하고는 합니다.

 

그럴때 css의 background 속성으로 이미지를 대체하게 된다면?

높이값을 필수적으로 기입해줘야 하기 때문에 위의 'width:100%; height: auto;' 는 효력을 발휘하지 못하게 됩니다.

 

이럴때 사용할 수 있는 것이 CSS3의 함수인 calc()입니다.

 

가로 500px, 세로 400px의 이미지를 해상도에 따라 반응하여

종횡비를 유지해야 하는 이미지가 있다고 예를 들어 보겠습니다.

 

.bg {
    width: 100%;
    height: 0; /* height: 0 은 필수적으로 들어가야 하는 값 입니다. */
    padding-bottom:  calc(400 / 500 * 100%); /* calc(이미지세로 / 이미지가로 * 100%) */
    background: url(bg.jpg) top center / cover no-repeat;
}

 

다른 속성은 상황에 따라 알맞게 사용하시면 되지만

 

필수적으로 들어가야하는 값중 우선 높이값을 지정하는 'height' 속성의 값을 '0' 으로 넣어줍니다.

 

높이값을 지정해주는 속성으로는 'height' 대신 'padding-bottom' 또는 'padding-top' 으로 대체합니다.

 

여기서 사용되는 값에 위에 얘기한 calc() 함수를 사용하며 지정값은 '(이미지높이 / 이미지가로 * 100%)' 가 들어갑니다.

 

 

다른 방법 또한 존재하지만 추후 유지보수의 경우를 생각하면 calc() 함수가 가장 적절 할 수 있습니다.

 

다만 IE가 서비스 종료되는 2022년까지 크로스 브라우징의 이슈사항은 필수적으로 감안해야 합니다.