냉이국
50
2016-12-13 21:44:53
4
1383

이미지 크기를 자동 조절할수 없나요?


jsp + bootstrap 이용해서 실습으로 홈페이지를 하나 만들고 있는데요, 


상단에 이미지로 만들어서 꽉 채우고 싶은데 저렇게 빈공간이 생기네요



<div class="jumbotron">

  <div class="container text-center">

    <img src="img/Untitled-5.jpg" class="img-responsive" alt="Responsive image">

  </div>

</div>


이렇게 했는데... 꽉 채울수 없을까요??

0
  • 답변 4

  • 푸르게
    558
    2016-12-13 23:49:56

    http://jsfiddle.net/rq9ycjcx/8/

    .jumbotron img {
       width: 100%;
    }


  • 냉이국
    50
    2016-12-14 00:00:21

      <style>


        .navbar {

          margin-bottom: 50px;

          border-radius: 0;

        }

      .jumbotron img {

        width: 100%;

    }

         .jumbotron {

          margin-bottom: 0;

          background-color: white;

        }


      </style>

    </head>

    <body>


    <div class="jumbotron">

      <div class="container text-center">

        <img src="img/Untitled-5.jpg" class="img-responsive" alt="Responsive image">

      </div>

    </div>


    이렇게 고쳤는데 그대로 입니다. bootstrap 특히 더 잘몰라서 그런데 혹시 저기 .jumbotron과 .jumbotron img 가 ㅌ이 있을수 있나요?

  • 날림
    302
    2016-12-14 00:37:15

    고쳤는데 그렇다면 원본이미지가 흰색 배경의 공백을 그만큼 가지고 있거나  부모 노드에서 margin/padding을 일정수치 갖고 있는 것 같네요.

    보통은 원본이미지와 비율이 같은 썸네일 + 특정사이즈(x*y)로 cropped(비율에 관계없이 특정 부위를 잘라낸)된 이미지를 원본이미지 저장시 함께 생성 합니다.


  • Mambo
    6k
    2016-12-14 01:41:07

    컨테이너 자체에 패딩들어가있지않나요??

    container-fluid하셔야할것같은데

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