css 질문입니다.
본문
http://sir.kr/yc5_theme/658의 스킨을 보면
pc에서 보이는 배경이미지가 모바일로 가면 일부가 짤려져 보이는데요
해당 코드는 아래와 같습니다.
/*메인배너*/
#main_bn_wr{width:100%;height:100%;position:relative}
#main_bn_wr .bottom_btn{position:absolute;bottom:0;left:50%;width:80px;height:40px;margin-left:-40px;background:url(img/buttom.png) no-repeat;border:0;text-indent:-999px;overflow:hidden;z-index:90}
#main_bn{position:relative;border:1px solid #ddd;border-top:0;}
#main_bn .owl-prev{position:absolute;top:50%;left:0;z-index:9;margin-top:-35px;;width:50px;height:70px;background:url('img/pv_btn_3.png') no-repeat 50% 50%;text-indent:-999px;overflow:hidden;opacity:0.5}
#main_bn .owl-next{position:absolute;top:50%;right:0;z-index:9;margin-top:-35px;width:50px;height:70px;background:url('img/nx_btn_3.png') no-repeat 50% 50%;text-indent:-999px;overflow:hidden;opacity:0.5}
#main_bn .owl-next:hover,#main_bn .owl-prev:hover{opacity:1}
#main_bn .item{position:relative}
#main_bn .owl-wrapper-outer{position:fixed;top:0;left:0;width:100%;height:100%}
#main_bn .owl-wrapper-outer,#main_bn .owl-wrapper-outer div{height:100%}
#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main_bn .bn-txt-wr{display:block;position:absolute;top:30%;left:10%;text-align:left;width:100%;max-width:60% }
#main_bn .bn-txt{display:inline-block;font-size:4em;color:#fff;font-weight:bold; text-shadow: 2px 2px 0px #7089ce;;
-moz-text-shadow: 2px 2px 2px #7089ce;
-webkit-text-shadow: 2px 2px 2px #7089ce;}
#main_bn .bn-txt .small{display:block;font-size:0.3em;margin:30px 0;text-shadow:none; -moz-text-shadow:none; -webkit-text-shadow:none; filter: none;}
#main_bn .bn-txt-wr .view{display:inline-block;background:#000;color:#fff;padding:0 40px;font-size:0.92em;margin-top:31px;height:35px;line-height:35px;border-bottom:2px solid #000;}
#main_bn .owl-wrapper-outer a .bn-txt-wr .view:hover{background:#7089ce;color:#fff;transition: all 0.3s ease;}
@media (max-width: 970px){
#main_bn .bn-txt{font-size:3em}
}
@media (max-width: 640px){
#main_bn .bn-txt-wr{max-width:80%;text-align:center}
#main_bn .bn-txt{font-size:3em;}
}
이미지에 해당되는 부분이
#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
위의 코드에서 height:auto;width:100%;로 바꾸면 않되는데 뭐가 문제일까요?
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
이미지는 해당도에 맞게 나오는데요 높이 조절이 않되내요^^;
높이를 auto로 바꾸면 이미지가 출력이 않되고요^^;
답변 4
짤라보이신다는 말이 해당 배경의 좌측에 위치한 소녀얼굴이 안보이는 것을 의미하는 것인가요?
사용된 CSS 코드는 background 즉, 배경을 이용해 컨트롤하기 때문에 일반 이미지완 다르죠.
background-position: top center;
로 되어 있는데 이를, top left로 수정하시면 좌측정렬이 되겠지요.
이러면 문제는 가운데에 배경 이미지가 있는 것들이 짤라보이시겠지요.
애초에 가운데 정렬이나 좌측정렬로된 이미지들을 사용하시고 거기에 맞게 수정하셔야겠죠.
height:auto; 를 아예삭제해보세요
height;를 삭제하면 이미지가 않보이네요^^;
#main_bn 부분의 css를 보니, js에서 높이를 제어하고 있는 것 같아요~~
자, 다음 능력자분이 답변 해주실 ... ㅡ,. ㅡㅋ
아마 질문자분은 이미지의 비율에 맞게 하고 싶어 하시는 게 아닐까 싶은데...
화면에 꽉차게 말고 가로 100% 했을 때 높이를 자동으로 맞추고 싶으신 듯...
방법이 있는지는 모르겠으나...
테마의 취지를 볼 때에 잘리더라도 화면에 꽉 차게 표현하는 현재의 모습이 맞는 것 같습니다.
현재는 Center로 되어 있는데... 'Left'나 'Right'로 변경하는 쪽도 괜찮을 듯 해요.
#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;