[CSS] background-image 반응형으로 자연스럽게 줄어들게 하기

See the Pen background-image by limhaneul2244 (@limhaneul2244) on CodePen.

background-image를 이용해 자연스럽게 이미지가 줄어들게 하는게 쉽지 않아 시간이 있을 때 정리를 해보려고 한다.

.container {
    width: 100%;
    height: 0;
    padding-bottom: calc(height/width * 100%);
    background-size: cover;
    background-image: url('이미지경로/이미지파일');
    background-repeat: no-repeat;
    background-position: center;
}

height를 0으로 준 뒤

padding-bottom에 calc를 통해 이미지가 유연하게 늘어났다 줄어들었다하게 한다.

 

 

---

[참고자료]

반응형으로 종횡비 유지하여 이미지 표시하기

 

[티스토리 내 유사글]

[CSS] iframe 반응형으로 비율유지하며 줄어들게 하기