부트 스트랩 4 같은 높이의 행

-1

나는 6 개의 이미지 중 하나가 다른 것보다 높으면 부트 스트랩 4 그리드를 사용하여 갤러리를 만들었습니다. 6 개의 이미지가 하나의 행이됩니다. 전체 행의 이미지도 커집니다. 고정 된 것을 설정하고 싶습니다. 이미지는 단지 그 크기에 크기를 조정할 수 있도록 크기 행, 나는하지 않았다 경우 모든 이미지는 실제 높이와 폭에 시작할 대량 될 것입니다 있기 때문에 행의 크기를 채울 수 있도록 CSS를부트 스트랩 4 같은 높이의 행

height: 100%; width 100%;

를 사용합니다.

<body> 
    <div class="container"> 
     <div class="row no-gutters"> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="tall-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
      <div class="col-lg-2"> 
       <img src="normal-image.jpg" alt="" class="img-fluid"> 
      </div> 
     </div> 
    </div> 
</body>

출처

2017-03-21 Calibur Victorious

@ZimSystem 이미지는 200x300이며, 다른 100 %로, 150x250 경우 나는 100 %를 사용하지 않은 경우, 그것은 보통 크기로 유지, 그리고 모든 유적, 최대 300x300으로 두 이미지로 가득 사업부를 얻을 수 가능한 중단 점보기 –

오케이, 나는 당신이 성취하려는 것을 이해하지 못합니다. 어떻게 작동 할 것으로 기대합니까? 다음 행이 첫 번째 행 아래에 완벽하게 정렬 되길 기대합니까? "석공 술"효과처럼? – ZimSystem

@ZimSystem 문제가 정렬되지 않습니다. 예를 들어, 첫 번째 행에 1 개의 그림 500x400이 있고 다른 5 개의 행이 250x200 인 경우 500x400에서 250x200까지 압축 할 수 있습니다. –

당신은 아마 그냥 이미지에 CSS 클래스를 추가 할 사용자 정의 CSS를

.img-fluid{ max-width:100%; max-height:100px; }

출처

2017-03-21 07:51:57

이전에 한 번 해본 적이 있으면 모든 이미지가 실제 크기로 돌아갑니다. –

이미지의 가로 세로 비율을 유지 하시겠습니까? –

을 추가 할 수 있습니다, 당신이 원하는 마지막은 업로드하기 이미지와 거의 모든 사이트를 덮고있다.

는

img.img-fluid { 
height: 250px; 
}

출처

2017-03-21 07:57:38 Xariez

다른 중단 점에서 전체 갤러리를 파멸시킵니다. –

부트 스트랩 4 같은 높이의 행

답변

관련 문제