css flex is changing image size

Question

I am using the css flex to layout a series of 3 lines of logos. They are all the same size apart from two in the last line which are a bit deeper.

All the logos in the last line are being stretched to be the same depth, ie that of the deeper pair.

Image shows that the logos 1,3 and 5 have been stretched vertically

How do I stop this please.

    .brandLogos div{
      display:flex;
      display:-webkit-flex; 
      flex-flow: wrap;
      -webkit-flex-flow: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;  
    }
    
    .brandLogos img {
      border:1px solid green;
      margin-right:10px;
      margin-bottom:30px;
    }

    
    <div class="brandLogos">
     <div>
     .. 10 previous images 
      <img src="/uploads/2017/03/santander.jpg" alt="santander logo" width="134" height="70" />
      <img src="/uploads/2017/03/Sony.jpg" alt="" width="134" height="119" />
      <img src="/uploads/2017/03/talktalk.jpg" alt="talktalk logo" width="134" height="70" /> 
      <img src="/uploads/2017/03/unilever.jpg" alt="unilever logo" width="134" height="119" />
      <img src="/uploads/2017/03/Warburtonslogo.jpg" alt="warburtons logo" width="134" height="70" />
     </div>
    </div>

you have used `width="134" height="70"` attributes they will obviously stretch your images no matter what. — vivekkupadhyay, Mar 20 '17 at 12:38

score 13 · Accepted Answer · answered Mar 20 '17 at 12:38

You need to set the align-items: center;, which by default is stretch

Example

.brandLogos div{
  display:flex;
  display:-webkit-flex; 
  flex-flow: wrap;
  -webkit-flex-flow: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
}

More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 1 · Answer 2 · answered Mar 20 '17 at 12:35

1

Use align-items on the container.

Possible values are:

flex-start
flex-end
center
baseline

stretch is the default.

FYI: http://devdocs.io/css/align-items

answered Mar 20 '17 at 12:35

Niek Nijland

732
1
7
20

score 0 · Answer 3 · answered Mar 20 '17 at 12:44

What you should try is to wrap each image in a div, set the images to width 100%. Flexbox would be applied on the divs only and no logo would be stretched.

<div class="logo-item">
<img src="/uploads/2017/03/santander.jpg" alt="santander logo" width="134" height="70" />
</div>

css flex is changing image size

3 Answers3