테스트 사이트 - 개발 중인 베타 버전입니다

배너 위아래에 공백이 생깁니다... 채택완료

하민규 3년 전 조회 1,701

</p>

<p>@charset "utf-8";</p>

<p>/* bx slider main banner */

#main_bn {;position:relative;}

#main_bn .slide-wrap{display:none}

#main_bn .slide-wrap li{height:780px;}

#main_bn .slide-wrap img{width:100%; height:100%; object-fit:contain;}

#main_bn .bx-controls{position:absolute; bottom:40px; left:50%; width:300px; margin-left:-150px; text-align:center; z-index:99;}

#main_bn .bx-prev, 

#main_bn .bx-next{position:absolute; top:50%; margin-top:-20px; width:40px; height:40px; text-indent:-9999px;overflow:hidden; opacity:0.7;}

#main_bn .bx-prev{left:0; background:url('img/icon_bx_prev.svg') no-repeat 50% 50%; background-size:40px auto;}

#main_bn .bx-next{right:0; background:url('img/icon_bx_next.svg') no-repeat 50% 50%; background-size:40px auto;}

#main_bn .bx-prev:hover, #main_bn .bx-next:hover{opacity:1}

#main_bn .bx-pager-item {display:inline-block; padding:0 8px;}

#main_bn .bx-pager-link{display:block;width:8px;height:8px;background:#fff;border-radius:4px;text-indent:-999px;overflow:hidden;opacity:.5;}

#main_bn .active{opacity:1; -webkit-box-shadow:0 0 8px 5px rgba(255,255,255,0.6); -moz-box-shadow:0 0 8px 5px rgba(255,255,255,0.6); box-shadow:0 0 8px 5px rgba(255,255,255,0.6);}</p>

<p>

#main_bn .bx-viewport{

    height:370px !important;

}

#main_bn .slide-wrap li{height:370px;}

/* ****************************************************************************************** *

 * 1024px

 * ****************************************************************************************** */

@media screen and (max-width:1024px) {

    

    #main_bn .slide-wrap li{height:660px;}</p>

<p>}

/* 1024px end */</p>

<p>/* ****************************************************************************************** *

 * 767px

 * ****************************************************************************************** */

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

    

    #main_bn .slide-wrap li{height:520px;}

    

}

/* 767px end */</p>

<p>

/* ****************************************************************************************** *

 * 425px

 * ****************************************************************************************** */

@media screen and (max-width:425px) {

    

    #main_bn .slide-wrap li{height:400px;}

    #main_bn .bx-prev, #main_bn .bx-next{width:40px; height:40px;}

    

}

/* 425px end */</p>

<p>

 

현재 CSS 코드입니다.

배너가 좌우폭을 줄이면 짤려서 6번째 줄의 object-fit을 cover에서 contain으로 바꿨더니 잘리지는 않지만 좌우 폭을 줄일시 상하에 여백이 생깁니다.

어떻게 해야할까요?ㅜㅜ

며칠째 매달려도 해결이 되지 않네요...

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
3년 전
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

테드창
3년 전
곰곰히 쳐다보다 bx.viewport 아래의 모든 px을 100%로 조정하니 해결됐습니다 ㅠㅠ
너무 감사드립니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인