[Publishing] 반응형 배너 작업

사이트를 만들다 보면 banner list 이미지 사이즈 높이값을 지정하기가 애매하다.

높이값을 픽셀로 지정해버리면 해당 배너 등록 비율이 깨질수도 있기 때문이다.

따라서 등록한 배너 비율을 유지하면서 반응형 작업을 해야하는데, image banner responsive style(CSS)는 다음과 같다.

 

우선 HTML 구조를 img 태그를 감싸는 부모와, img 태그로 코딩한다.

<div class="img-area">
	<img src="img/banner_sample.png" alt="배너 이미지 샘플">
</div>

이미지 비율에 따라 부모 클래스 "img-area"의 padding-top이나 padding-bottom의 퍼센트 스타일을 주어야한다. 

padding-top을 줄것인가 bottom을 줄것인가는 개인 선택이다. 

여기서는 padding-bottom으로 예를 들겠다.

 

여기서 알아두어야 할 것이 해당 이미지 비율인데 이미지 비율마다 다른 퍼센트를 준다.

• 2:1 padding-bottom: 50%
• 1:2 padding-bottom: 200%
• 4:3 padding-bottom: 75%
• 16:9 padding-bottom: 56.25%

해당 배너 이미지가 어떤 비율인지 모를경우에는 다양한 비율 계산 사이트가 있으니 참고 하면 된다.

https://andrew.hedges.name/experiments/aspect_ratio/

Aspect Ratio Calculator (ARC)

HTML 구조까지 완성이 되었으면 해당 구조의 스타일을 아래와 같이 입힌다.

배너 이미지 비율이 16:9일 경우로 가정해서 스타일을 입혀 보았다.

.img-area {
	position: relative;
    overflow: hidden;
	width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.img-area>img {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}