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개 / 댓글 1개
짤라보이신다는 말이 해당 배경의 좌측에 위치한 소녀얼굴이 안보이는 것을 의미하는 것인가요?
사용된 CSS 코드는 background 즉, 배경을 이용해 컨트롤하기 때문에 일반 이미지완 다르죠.
background-position: top center;
로 되어 있는데 이를, top left로 수정하시면 좌측정렬이 되겠지요.
이러면 문제는 가운데에 배경 이미지가 있는 것들이 짤라보이시겠지요.
애초에 가운데 정렬이나 좌측정렬로된 이미지들을 사용하시고 거기에 맞게 수정하셔야겠죠.
방법이 있는지는 모르겠으나...
테마의 취지를 볼 때에 잘리더라도 화면에 꽉 차게 표현하는 현재의 모습이 맞는 것 같습니다.
현재는 Center로 되어 있는데... 'Left'나 'Right'로 변경하는 쪽도 괜찮을 듯 해요.
#main_bn .bn-img{display:block;height:100%;width:100%;background-size:100% 100%;background-position:top center;
nanati#main_bn 부분의 css를 보니, js에서 높이를 제어하고 있는 것 같아요~~
자, 다음 능력자분이 답변 해주실 ... ㅡ,. ㅡㅋ
아마 질문자분은 이미지의 비율에 맞게 하고 싶어 하시는 게 아닐까 싶은데...
화면에 꽉차게 말고 가로 100% 했을 때 높이를 자동으로 맞추고 싶으신 듯...
height:auto; 를 아예삭제해보세요
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.