CSS로 배경 이미지를 높이에 맞게 자동으로 설정하는 방법 (자체 정리용)

배경 이미지를 설정하는 경우 브라우저 폭에 맞게 너비를 100%, 높이를 auto로 맞추어 추가하는 방법.

.bg_banner_image {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
}
.bg_banner_image::after {
    content: '';
    display:block;
    padding: 15%;
}
// 출처: https://stackoverflow.com/questions/40520604/set-background-image-width-100-height-auto

또 다른 방법.

#sample-id {
  background: url(../images/sample.jpg) #202020 no-repeat;
  background-size: cover;
  max-height: 100%;
  max-width: 100%;
}
// 출처: https://foundation.zurb.com/forum/posts/14515-how-to-scale-background-image-accrd-to-width-of-the-browser

워드프레스에서는 페이지 빌더를 사용하면 매우 편리하게 콘텐츠를 브라우저 폭에 맞게 추가할 수 있다.

• 아바다에서 전체폭(Full-width)으로 컨테이너를 추가하는 방법
• Divi 테마에서 배경 이미지 위에 반투명한 텍스트 상자 배치하기

참고할 만한 사이트:

• https://www.w3schools.com/css/css3_object-fit.asp
• Control image aspect ratios with CSS3 (CSS3로 이미지 종횡비/가로 세로 비율 조정하기)