웹페이지 상단 이미지 - 웹브라우저 폭에 따라 단계적으로 변하도록 하는법

.c-main-page .c-submenu-header-image > img {

width: auto;

}

.c-submenu-header-image {

position: relative;

overflow: hidden;

}

@media only screen and (max-width: 767px)

.c-main-page .c-submenu-header-image img {

min-width: 1024px;

margin-left: -512px;

left: 50%;

}

☞ 이미지의 원래 높이는 유지됨.

☞ 이미지의 가로길이는 1024px 일때 위와 같이 함.