CSS - Make images same size even if row isn't full

Question

I am trying to make a layout for images in my rails app and I'm having trouble with the alignment.

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%;
}

I thought flexbox would be the best way to do this. I would like the images to resize on windows resize, that's why I have have width: 100%.

But the problem I run into is that when the last row doesn't have three images they change their size slightly and I want to keep the images the same size. I want all images in all rows to be the same size as images in a full row. All images must be same size always.

I tried removing the rows and just let it be one big flexbox, but was encountering alignment issues with that as well.

If you use instagram find someone with the last row of pics not being full. This is the functionality I want, but can't figure out how they do it.

jsfiddle

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

EDIT:

Actually looks like my question is a duplicate of Flex-box: Align last row to grid. I solved my problem inserting empty elements to fill the row, like the first answer there suggests.

I don't have instagram, so I'm missing some of the picture here, but if you want the images to resize uniformly, why doesn't a simple percentage width work? — Joseph Marikle, Apr 25 '16 at 13:33
@JosephMarikle I want all images for all rows to be exactly the same size. When a row has only two images they are much bigger than the images in a full row and I don't know how to fix this. — user4584963, Apr 25 '16 at 13:34
Have you tried using the `flex` property (I would think `flex:1 auto`)? like here: https://jsfiddle.net/koys2ok6/ — Joseph Marikle, Apr 25 '16 at 13:37
Your images should get upscaled even though they might be smaller than a 1/3 column. Is that correct? — fabian-mcfly, Apr 25 '16 at 13:41

score 3 · Answer 1 · answered Apr 25 '16 at 13:43

You could set a max width on the .photo-wrapper

.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/

score 1 · Answer 2 · answered Apr 25 '16 at 13:58

1

Do you really need that markup?

If you keep it to bare minimum, then it becomes very simple. Still, if you want all of those borders, you don't need all of those divs.

jsFiddle

All you need is

.pending-photo {
  width: 32%;
}

answered Apr 25 '16 at 13:58

Jose Rui Santos

15,009
9
58
71

score 0 · Answer 3 · answered Apr 25 '16 at 13:24

0

Try old css

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

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

Into new css this

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

answered Apr 25 '16 at 13:24

Maths RkBala

2,207
3
18
21

Thanks, I will fix with an edit, but this doesn't answer the main question. – user4584963 Apr 25 '16 at 13:25

score 0 · Answer 4 · answered Apr 25 '16 at 13:51

Since Fancybox does the sizing through it's JS, you're gonna have a hard time getting them perfect.

From a little bit of testing, you can always set the width and height static, and then use media queries to change sizes. Although this isn't ideal, it's the only thing that seems to work for the effect you're going after.

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

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

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

    }

CSS - Make images same size even if row isn't full

4 Answers4