Ayla_ouo
34
2018-11-26 21:18:27
4
221

반응형 홈페이지 배너 높이 줄이는 방법이 있을까요?


반응형 홈페이지를 만드는 중입니다.

Width는 min-width랑 max-width가 돼는데,

Height는 min-height랑 max-height가 안돼더라구요

배너 아래부분은 줄이면 가로랑 세로랑 둘다 같이 줄어드는데 배너만 가로 세로가 같이 안줄어들어요. 가로만 줄어들더라구요. 배너 이미지는 가로로 찌그러지구요.

그래서 미디어 쿼리에 세로 값을 빼가면서 줄어들게 만들어 놓기는 했는데, height는 width 처럼 줄어드는 방법이 있나요?

웹 크기에서 태블릿 크기로 갈 때

태블릿 크기에서 스마트폰 크기로 갈 때

스마트폰 크기에서 폴더폰 크기로 갈 때

자꾸 이미지가 가로로 찌그러져요

도와주세요!

0
0
  • 답변 4

  • kenu
    42k
    2018-11-26 21:49:23

    css 코드는요?


    0
  • Ayla_ouo
    34
    2018-11-26 22:06:53


    <div id="contents">
        <div class="banners">
         <div class="banner">
          <a href="#" class="slide" id="slide-1"><img src="img/sub_top2_1.png" alt="banner1"></a>
          <a href="#" class="slide" id="slide-2"><img src="img/sub_top2_1(2).png" alt="banner2"></a>
          <a href="#" class="slide" id="slide-3"><img src="img/sub_top2_1(3).png" alt="banner3"></a>
         </div><!--banner end-->
         <div class="banner2">
           <a href="#" class="slide" id="slide-1"><img src="img/sub_top2_1(4).png" alt="1024px_1"></a>
           <a href="#" class="slide" id="slide-2"><img src="img/sub_top2_1(5).png" alt="1024px_2"></a>
           <a href="#" class="slide" id="slide-3"><img src="img/sub_top2_1(6).png" alt="1024px_3"></a>
         </div><!--banner2 end-->
    
        </div><!--banners end-->
    *{margin:0;padding:0;}
    body{width:100%;height:100%;}
    img{vertical-align: top;}
    li{list-style: none;}
    a{text-decoration: none;}
      #wrap{width:100%;height:100%;overflow: hidden;}
    #contents{width:100%;height:3700px;margin:0 auto;position:relative;}
      .banners {background: rgba(255, 255, 255);height: 500px;min-width: 2050px;max-width:50%;margin:0 auto;display:table;overflow: hidden;position: relative;}
          .banner{width:100%;height: 500px;position: absolute;top:0;left:0;display:table;}
          .banner .slide{width:100%;height: 500px;top:0;left:0;display:table;position: absolute;width: 100%;float: left;}
          .banner .slide img { width:100%;height:500px;display:table;position: absolute;top:0;left:0;float: left;}
          #slide-1,#slide-2,#slide-3{float:left;display: block;}
          .banner2{display:none;}
    @media(min-width:1100px) and (max-width:1500px){
      #contents{width:100%;height:100%;margin:0 auto;position:relative;}
          .banners {min-width: 100%;max-width: 70%;height:600px;background: rgba(255, 255, 255);margin:0 auto;display:table;overflow: hidden;position: relative;}
          .banner{display:none;}
          .banner2{width:100%;height: 100%;position: absolute;top:0;left:0;display:table;}
          .banner2 .slide{width:100%;min-height: 100%;_height:30%;top:0;left:0;display:table;overflow: hidden;position: absolute;float: left;}
          .banner2 .slide img {width:100%;height:100%;display:table;overflow: hidden;position: absolute;top:0;left:0;float: left;}
          #slide-1,#slide-2,#slide-3,#slide-4{float:left;display: block;}
    }
    @media(min-width:985px) and (max-width:1100px){
    #contents{width:100%;height:100%;margin:0 auto;position:relative;}
          .banners {min-width: 100%;max-width: 70%;height:500px;background: rgba(255, 255, 255);margin:0 auto;display:table;overflow: hidden;position: relative;}
          .banner{display:none;}
          .banner2{width:100%;height: 100%;position: absolute;top:0;left:0;display:table;}
          .banner2 .slide{width:100%;height: 100%;top:0;left:0;display:table;overflow: hidden;position: absolute;float: left;}
          .banner2 .slide img {width:100%;height:100%;display:table;overflow: hidden;position: absolute;top:0;left:0;float: left;}
          #slide-1,#slide-2,#slide-3,#slide-4{float:left;display: block;}
    }
    @media(min-width:700px) and (max-width:985px){
      #contents{width:100%;height:100%;margin:0 auto;position:relative;}
          .banners {min-width: 100%;max-width: 70%;height:500px;background: rgba(255, 255, 255);margin:0 auto;display:table;overflow: hidden;position: relative;}
          .banner{display:none;}
          .banner2{width:100%;height: 100%;position: absolute;top:0;left:0;display:table;}
          .banner2 .slide{width:100%;height: 100%;top:0;left:0;display:table;overflow: hidden;position: absolute;float: left;}
          .banner2 .slide img {width:100%;height:100%;display:table;overflow: hidden;position: absolute;top:0;left:0;float: left;}
          #slide-1,#slide-2,#slide-3,#slide-4{float:left;display: block;}
    }
    @media(max-width:700px){
    #contents{width:100%;height:100%;margin:0 auto;position:relative;}
          .banners {min-width: 100%;max-width: 70%;height:410px;background: rgba(255, 255, 255);margin:0 auto;display:table;overflow: hidden;position: relative;}
          .banner{display:none;}
          .banner2{width:100%;height: 100%;position: absolute;top:0;left:0;display:table;}
          .banner2 .slide{width:100%;height: 100%;top:0;left:0;display:table;overflow: hidden;position: absolute;float: left;}
          .banner2 .slide img {width:100%;height:100%;display:table;overflow: hidden;position: absolute;top:0;left:0;float: left;}
          #slide-1,#slide-2,#slide-3,#slide-4{float:left;display: block;}
    }
    배너 부분만 넣어봤어요!


    0
  • spacepublisher
    65
    2018-11-27 05:11:37

    img 엘리먼트의 height속성의 값을 auto로 정의하십시오.

    https://jsbin.com/cehuwumito/edit?css,output

    1
  • Ayla_ouo
    34
    2018-11-27 16:51:17

    와 대박!! 돼요!! 잘돼요!!! 너무너무너무 감사해요!!

    도와주셔서 감사합니다><

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.