css 질문입니다. 채택완료
http://sir.kr/yc5_theme/658">http://sir.kr/yc5_theme/658의 스킨을 보면
pc에서 보이는 배경이미지가 모바일로 가면 일부가 짤려져 보이는데요
해당 코드는 아래와 같습니다.
</p><p>/*메인배너*/</p><p>#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;
}</p><p>#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;}</p><p>@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;}
}</p><p>
이미지에 해당되는 부분이
</p><p>#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;
}</p><p>
위의 코드에서 height:auto;width:100%;로 바꾸면 않되는데 뭐가 문제일까요?
</p><p>background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}</p><p>이미지는 해당도에 맞게 나오는데요 높이 조절이 않되내요^^;
높이를 auto로 바꾸면 이미지가 출력이 않되고요^^;
답변 4개
짤라보이신다는 말이 해당 배경의 좌측에 위치한 소녀얼굴이 안보이는 것을 의미하는 것인가요?
사용된 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;
댓글을 작성하려면 로그인이 필요합니다.
#main_bn 부분의 css를 보니, js에서 높이를 제어하고 있는 것 같아요~~
자, 다음 능력자분이 답변 해주실 ... ㅡ,. ㅡㅋ
아마 질문자분은 이미지의 비율에 맞게 하고 싶어 하시는 게 아닐까 싶은데...
화면에 꽉차게 말고 가로 100% 했을 때 높이를 자동으로 맞추고 싶으신 듯...
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인