천발무금
976
2017-07-23 12:09:29 작성 2017-07-23 12:40:15 수정됨
3
1216

부트스트랩 이미지 밀리는 현상 문의


안녕하세요 초급개발자 인사드립니다~

다름아니라 부트스트랩으로 반응형 사이트를 만들던 중 잘 해결이안되는 부분이 있어 문의드립니다.



부트스트랩 그리드시스템을 이용해 아래와 같은 layout 구성을 잡았습니다.


화면 가로 크기 992px ~ 최대크기



화면 가로 크기 768px ~ 992px



화면 가로 크기 768px 이하



그런데 768px ~ 992px 일때 이미지가 아래와 같이 잡힙니다.



각 이미지마다 태그는 <div><a><img></a></div> 이고, div를 기준으로 반응형 잡았습니다.

그런데 왜 위와같이 빈영역이 생기면서 이미지가 밀리는지 잘 모르겠네요

심지어 빈공간부분은 크롬 개발자도구로 어떤 영역도 잡히지 않습니다. ㅜ.ㅜ

이미지마다 마진, 패딩값은 0이구요!

이미지 반응형은 부트스트랩에 class="img-responsive" 클래스 이용했습니다.

저런 현상에서 구글에 뭘 검색해봐야할지도 모르겠어서 도움주시면 정말 감사드리겠습니다 ㅠㅠ


[소스코드]

각 이미지 하나하나는 아래와 같이 구현했습니다.

<div class="col-lg-4 col-sm-6">

                    <a href="경로" class="portfolio-box">

                        <img src="경로" class="img-responsive" alt="">

                        <div class="portfolio-box-caption">

                            <div class="portfolio-box-caption-content">

                                <div class="project-category text-faded">

                                    Project6.

                                </div>

                                <div class="project-name">

                                    프로젝트이름

                                </div>

                            </div>

                        </div>

                    </a>

                </div>

0
  • 답변 3

  • shaffron
    4k
    2017-07-23 12:27:36

    div 태그에는 그리드 클래스를 주신건가요??


    가능하면 아래와 같이 클래스로 감싸보세요.

    <div class="col-xs-12 col-md-6 col-sm-12">

         <img src="#" width="100px" height="100px">

    </div>


  • 천발무금
    976
    2017-07-23 12:41:15

    shaffron님 답변 감사드립니다 ㅎㅎ


    소스는 본문에 추가해봤습니다! 알려주신 것과 같이 저도 div에 그리드시스템주고 감싸본 것 같습니다 ㅎㅎ


    구글에 뭐라고 검색해봐야할지 감도안잡히네요..ㅜㅜ.


  • 프리미엄
    289
    2017-07-24 07:13:18
    관련 부분 CSS를 봐야 알 것 같네요
  • 로그인을 하시면 답변을 등록할 수 있습니다.