[Publishing] 반응형 배너 작업_v2

반응형 배너 작업을 할 때, 이미지를 감싸고있는 부모 요소의 padding-bottom이나 padding-top을 이용하여 비율을 맞췄었다.

(이전 글 참고 : 이미지 비율 알아내는 사이트 링크도 여기에 있습니다.)

https://jintrue.tistory.com/entry/Publishing-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%B0%EB%84%88-%EC%9E%91%EC%97%85

[Publishing] 반응형 배너 작업

 

하지만 CSS3에는 calc라는 훌륭한 스타일이 존재한다는 것을 잊고있었다.

calc를 사용하면 어떤 비율의 이미지 작업이던 가능하다.

예) 이미지 비율이 3*2 일때,

 

HTML

<div class="img-box">
	<img src="img/sub/banner/sample.png" alt="이미지 샘플">
</div>

 

CSS

.img-box {
	position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(100% / 3*2);
}

.img-box>img {
	position: absolute;
    top: 0;
    left: 0;
	max-width: 100%;
	height: 100%;	
}