css flex正在改变图像大小[重复]答案

【问题标题】：css flex is changing image size [duplicate]css flex正在改变图像大小[重复]
【发布时间】：2017-08-11 17:36:37
【问题描述】：

我正在使用 css flex 来布局一系列 3 行徽标。除了最后一行中的两个更深一些之外，它们的大小都相同。

最后一行中的所有徽标都被拉伸到相同的深度，即更深的对。

图像显示徽标 1,3 和 5 已被垂直拉伸

请问我该如何阻止。

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

【问题讨论】：

您使用了width="134" height="70" 属性，无论如何它们显然会拉伸您的图像。

标签： html css flexbox

【解决方案1】：

您需要设置align-items: center;，默认为stretch

示例

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

【讨论】：

【解决方案2】：

在容器上使用align-items。

可能的值是：

flex-start
flex-end
center
baseline

stretch 是默认值。

仅供参考： http://devdocs.io/css/align-items

【讨论】：

【解决方案3】：

您应该尝试将每个图像包装在一个 div 中，将图像设置为 100% 的宽度。 Flexbox 将仅应用于 div，不会拉伸任何徽标。

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

【讨论】：