반응형 이미지 가로 사이즈 문의 드립니다.

반응형 이미지 가로 사이즈 문의 드립니다.

QA

반응형 이미지 가로 사이즈 문의 드립니다.

본문

부트스트랩 컴퍼니테마 2를 사용하고 있습니다.

화면을 줄이면 메인이미지 중간이 보여지는데 줄일때 가로세로 사이즈를 창에 맞게 줄이려면 어떻게 해야 되는지 고수님들 부탁드립니다.

--------------------

소스부분

/* #home 배너 */

#home:after{display:block;clear:both;content:"";}
.home_section {height:100%;padding:150px 0 200px 0;overflow:hidden;}
.background_mainbg, .backstretch{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;background: url("../img/mainbg.jpg") center center no-repeat; background-image:100%; !important;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;-o-background-size: cover;}
.background_bg, .backstretch{position:absolute;top:0;bottom:0;left:0;right:0;height:360px;width:100%;background: url("../img/bg.jpg") center center no-repeat; background-image:100%; !important;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;-o-background-size: cover;}
.home_section .container {height: 100%;}
.home_content {position:relative;display:table;height:100%;width:100%;overflow: hidden;}
.title {font-size: 40px;line-height: 50px;color: #fff;font-weight: 600;}
.description {margin-bottom: 30px;font-size: 25px;line-height: 30px;color: #fff;}

이 질문에 댓글 쓰기 :

답변 5

반응형이라 아마 기본 css 에 img 에 max-width:100%; height:auto 로 되 있을듯 합니다만..

메인이미지가 배경으로 잡혀 있고 -o-background-size: cover; 이런 속성들이 이미지 가운데만 보여지게 하고 있거든요.

 

.background_mainbg, .backstretch{position:relative;top:0;bottom:0;left:0;right:0;height:100%;width:100%;background: url("../img/mainbg.jpg") center center no-repeat;}

게 해보세요

이부분 같습니다.^^

.background_mainbg, .backstretch{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;background: url("../img/mainbg.jpg") center center no-repeat; background-image:100%; !important;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;-o-background-size: cover;}

 웹프리죤님 알려주신 데로 했는데 이미지 부분이 아예 회색으로 보여집니다.

원본소스를 수정한 곳은 없는데요 ㅠㅠ 

.background_mainbg, .backstretch{ margin:0 auto; text-align:center } 로 바꾸시고

메인페이지에서 .background_mainbg, .backstretch 요소를 찾아서

<img src="../img/mainbg.jpg"> 이렇게 이미지로 넣으시면 반응형 이미지로 반응 할겁니다.

웹프리죤님 알려주셔서 감사드립니다.^^ 메인이미지 해결했습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 773
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT