CSS - Machen Sie Bilder gleiche Größe, auch wenn Zeile nicht voll ist

Question

Ich versuche, ein Layout für Bilder in meiner App Rails zu machen, und ich habe Probleme mit der Ausrichtung.

html

<div class="photos"> 
     <div class="photo-row"> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
     <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
     </div> 
     <div class="photo-row"> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
      <div class="photo-wrapper"> 
      <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a> 
      </div> 
     </div> 
</div> 

css

.photos { 
    display: flex; 
    flex-direction: column; 
    border: 10px solid goldenrod; 
} 

.photo-row { 
    border: 5px solid red; 
    display: flex; 

} 

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 
} 
.photo-wrapper:last-child { 
    margin-right: 0; 
} 

.pending-photo { 
    width: 100%; 
} 

Ich dachte Flexbox der beste Weg, dies zu tun wäre. Ich möchte, dass die Größe der Bilder auf der Fenstergröße geändert wird, deshalb habe ich eine Breite von 100%.

Aber das Problem, auf das ich gestoßen bin, ist, dass wenn die letzte Reihe nicht drei Bilder hat, sie ihre Größe leicht ändern und ich möchte die Bilder die gleiche Größe behalten. Ich möchte, dass alle Bilder in allen Zeilen die gleiche Größe wie Bilder in einer ganzen Zeile haben. Alle Bilder müssen immer die gleiche Größe haben.

Ich habe versucht, die Zeilen zu entfernen und es nur eine große flexbox zu sein, aber es gab auch Probleme mit der Ausrichtung.

Wenn Sie Instagram verwenden, finden Sie jemanden mit der letzten Reihe von Bildern nicht voll. Dies ist die Funktionalität, die ich will, kann aber nicht herausfinden, wie sie es tun.

jsfiddle

https://jsfiddle.net/kk7httso/11/

EDIT:

sieht tatsächlich aus wie meine Frage ein Duplikat Flex-box: Align last row to grid ist. Ich löste mein Problem, leere Elemente einzufügen, um die Reihe zu füllen, wie die erste Antwort dort suggeriert.

Answer 1

Versuchen alt css

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 

    &:last-child { 
    margin-right: 0px; 
    } 
} 

In neue CSS diese

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 
} 
.photo-wrapper:last-child { 
    margin-right: 0; 
} 

Answer 2

Sie eine maximale Breite auf der .photo-wrapper einstellen könnte

.photo-wrapper { 
    border: 5px solid greenyellow; 
    margin-right: 20px; 
    max-width:calc(33.3333% - 20px); //one third minus the 20px margin 
    box-sizing:border-box; // include the borders in the sizing 
} 

https://jsfiddle.net/kk7httso/23/

Answer 3

Da Fancybox die Dimensionierung durch JS macht, wird es schwer werden, sie perfekt zu machen.

Nach ein wenig Testen können Sie die Breite und Höhe statisch festlegen und dann mithilfe von Medienabfragen die Größe ändern. Obwohl dies nicht ideal ist, ist es das einzige, was für den Effekt, den Sie anstreben, zu funktionieren scheint.

/* Main image size */ 
    .pending-photo { 
     height:100px; 
     width:100px; 
    } 

/* Mobile image size */ 
    @media (max-width:767px){ 

    .pending-photo { 
     height:75px; 
     width:75px; 
    } 

    } 

Answer 4

Benötigen Sie wirklich dieses Markup?

Wenn Sie es auf ein Minimum beschränken, dann wird es sehr einfach. Dennoch, wenn Sie alle diese Grenzen möchten, brauchen Sie nicht alle diese divs.

jsFiddle

Alles, was Sie brauchen, ist

.pending-photo { 
    width: 32%; 
}