부트 스트랩에서 완벽하게 정사각형 된 이미지의 2 열 그리드를 만드는 방법은 무엇입니까?

Question

열이 반응하므로 너비가 다른 화면 크기에서 변경됩니다. 이미지는 모두 크기와 종횡비가 서로 다릅니다. 부트 스트랩에 고유 한 .thumbnail 클래스를 사용할 수 없습니다. 원하지 않는 스타일 옵션이 많기 때문입니다. 여기

Answer 1

는 단 2 열

<div class="row show-grid"> 
     <div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div> 
     <div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div> 
    </div> 

이 도움이 희망 할 것 방법이다. 여기 그리드에

상세 정보 : http://getbootstrap.com/css/#grid

Answer 2

HTML

<div class="row"> 
    <div class="col-xs-6"> 
     <div class="square"></div> 
    </div> 

    <div class="col-xs-6"> 
     <div class="square"></div> 
    </div> 
</div> 

CSS

.square { 
    width: 100%; 
    padding-bottom: 100%; 
    background-image: url('your_img'); 
    background-size: cover; 
} 

이 사각형으로 가능한 한 이미지의 정도에 맞게하려고합니다 . 종횡비가 1 : 1에서 멀어지면 이미지의 일부를 생략 할 수 있지만 아마 가장 좋은 방법 일 것입니다.