반응형 이미지 가로 사이즈 문의 드립니다.
관련링크
본문
부트스트랩 컴퍼니테마 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"> 이렇게 이미지로 넣으시면 반응형 이미지로 반응 할겁니다.
해결보셨으면 웹프리죤님 답변글에 채택 해주세요^^
