예를 들어 width:1000px; height:300px; 을 기준으로 하며, 종횡비를 유지해야하는 컨텐츠가
있다고 합시당
이렇게 가로:세로 10:3 의 비율을 유지하며 컨텐츠의 크기를 조절하려면, 아래와 같은 간단한
CSS 처리만 있으면 됩니다!!
**`[ CSS ]`**
.background { width : 100 %; height : 0; padding-top : calc (300 / 1000 * 100 %); / * calc (이미지 높이 ÷ 이미지 가로 × 100 %) * / background : url (bg.jpg) center center / cover no-repeat; }
우선 기본은 배경이미지의 너비 표시를 위해서 `width:100%;` 를 설정합니당
다음이 중요한 높이의 지정인데, 높이에 관해서는 `height` 대신 `padding-top`
또는 `padding-bottom` 을 이용합니다!!
( height:0; 의 설정은 필수입니다 ^^ )
`결론 먼저 얘기하자면, padding-top 또는 padding-bottom` 의 값은 **“
이미지 높이 ÷ 이미지 가로 × 100″** 입니다~
위 공식을 실제 픽셀사이즈로 치환해서 calc() 함수의 매개변수로 입력하면 됩니다!! ^^
이미 유명한 **반응형엘리먼트 계산식(‘target / parent value * 100′)** 을
이용해도 같은 결과를 얻을 수 있지만,
추후의 유지보수 또는 리뉴얼을 생각한다면 calc() 함수가 훨씬 더 효율적이라는
것을 알 수 있어요~!!
물론, 크로스 브라우징 이슈와 충돌하지 않는다면 말이죠 😉
반응형 웹이나 메트로 UI 작업을 하다보면 텍스트를 주요로 하고 배경이미지가
들어가는 컨텐츠는 자주 만날 수 있는
필수 등장요소 같은 친구들입니다~ 위와 같은 방법으로 효율적으로 대처하시길 바랄게요~ 😀