동일 간격 갤러리 이미지 축소판

Question

가변적 인 이미지를 배치해야하는 갤러리 페이지를 만들려고합니다. 예를 들어, 내가 이런 식으로 6 개 이미지를 배치 가정 해 봅시다 :

<link href="/stylesheets/gallery_gen.css" media="screen" rel="stylesheet" type="text/css"> 

<div class="my-gallery-contain" itemscope itemtype="http://schema.org/ImageGallery"> 

    <div class="my-gallery"> 
     <figure class="my-gallery-fig" classitemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="/img/gallery/matera/4.jpg" itemprop="contentUrl" data-size="600x400"> 
       <img src="/img/thumbs/matera/4.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
      <!--<figcaption itemprop="caption description"><p class="galleryCap">Image caption</p></ figcaption>--> 
     </figure> 
     <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="/img/gallery/matera/5.jpg" itemprop="contentUrl" data-size="600x400"> 
       <img src="/img/thumbs/matera/5.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
     </figure> 
     <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="/img/gallery/matera/6.jpg" itemprop="contentUrl" data-size="600x400"> 
       <img src="/img/thumbs/matera/6.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
     </figure> 
     <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="/img/gallery/matera/7.jpg" itemprop="contentUrl" data-size="600x400"> 
       <img src="/img/thumbs/matera/7.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
     </figure> 
     <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="/img/gallery/matera/8.jpg" itemprop="contentUrl" data-size="600x400"> 
       <img src="/img/thumbs/matera/8.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
     </figure> 
     <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
      <a href="/img/gallery/matera/28.jpg" itemprop="contentUrl" data-size="600x400"> 
       <img src="/img/thumbs/matera/28.jpg" itemprop="thumbnail" alt="Image description" /> 
      </a> 
     </figure> 
    </div> 

</div> 

CSS :

.my-gallery-contain { 
    margin: -20px 0px -20px; 
} 

.my-gallery img { 
    width: 300px; 
    margin: 0; 
    padding: 0; 

} 

.my-gallery-fig { 
    margin: 2px; 

    height: 200px; 
    overflow: hidden; 
    display: inline-block; 

} 

그러나, 첫 번째 행이 동일한 간격 가져옵니다. 내가 얻은 결과는 다음과 같습니다. https://i.imgur.com/XS6cerM.jpg

다른 행을 hade하면 처음 두 행만 균등하게됩니다. 마지막 행은 항상 균등하지 않은 행입니다.

어떻게 해결할 수 있습니까?

또 다른 질문 : 이미지와 그 옆에 고정 된 여백을 2px로 설정하려면 어떻게 div에 맞게 엄지 손가락 크기를 자동으로 조정할 수 있습니까? (게시 한 scree에서 두 번째 행의 오른쪽 여백은 있지만 외부 div에 맞게 이미지의 크기가 자동으로 조정되어야하므로 오른쪽 이미지의 왼쪽 여백과 오른쪽 여백이 같아야합니다. 왼쪽의 이미지)

Answer 1

왜 이미지가 4px의 전체 여백이 없는지 나는 알지 못합니다. 전 세계적으로 적용된 CSS 설정 또는 컨테이너만으로 인한 것일 수 있습니다. 정확히 무엇이 잘못되었는지를 알기 위해서는 더 많은 코드가 필요합니다.

이 문제를 해결하고 나중에 이미지를 쉽게 추가 할 수 있도록하려면 아직 그리드 레이아웃을 지원하지 않는 브라우저의 경우 flexbox 대체 기능이있는 CSS 그리드를 사용하는 것이 좋습니다.

이러한 두 가지 방법 모두 미래에 더욱 민감하게 반응 할뿐만 아니라 더 조정 가능하다는 특권을 갖고 있습니다.

CSS 그리드 :

@supports (display: grid) { 
    figure { 
     padding: 0; 
     margin: 0; 
    } 
    .my-gallery { 
     display: grid; 
     /* space between containers */ 
     grid-gap: 2px; 
    } 
    .my-gallery { 
     grid-template-columns: repeat(3, 300px); 
     grid-template-rows: 200px 200px; 
     grid-template-areas: "img1 img2 img3" "img4 img5 img6"; 
    } 
    /* positions */ 
    .my-gallery-fig:nth-child(1) { grid-area: img1; } 
    .my-gallery-fig:nth-child(2) { grid-area: img2; } 
    .my-gallery-fig:nth-child(3) { grid-area: img3; } 
    .my-gallery-fig:nth-child(3) { grid-area: img4; } 
    .my-gallery-fig:nth-child(3) { grid-area: img5; } 
    .my-gallery-fig:nth-child(3) { grid-area: img6; } 
    /* end of positions */ 
    .my-gallery-fig a { 
     display: inline-block; 
     width: 100%; 
     height: 100%; 
    } 
    .my-gallery-fig img { 
     display: block; 
     width: auto; 
     height: 100%; 
     margin: auto; 
    } 
} 

인 flexbox 대체 :

@supports not (display: grid) { 
    figure { 
     padding: 0; 
     margin: 0; 
    } 
    /* width accounts for image size and margins */ 
    .my-gallery { 
     display: flex; 
     width: 904px; 
     flex-flow: row wrap; 
    } 
    .my-gallery-fig { 
     flex: 0 1 300px; 
     height: 200px; 
     margin: 0 2px 2px 0; 
    } 
    /* last image of every row has no right margin */ 
    .my-gallery-fig:nth-child(3n) { 
     margin-right: 0; 
    } 
} 

내가했던 당신의 주어진 차원을 기반으로 코딩. 앞으로 필요에 따라 치수를 조정할 수 있어야합니다.

일부 추가 리소스 :
MDN on CSS Grid
MDN on "flex"

난이 도움이되기를 바랍니다!

P.S :이 실험을 할 수 있습니다 https://codepen.io/iamdeja/pen/zPwwXO 것을 제외하고, 작동하는 것 같다