Question

我有一排必须彼此相邻的图片（第一张在左边）。
我面临的问题是它们的尺寸，当我需要它们具有原始尺寸时，它们的高度都相同。

以下是语法和CSS：

<div class="header">
  <div class="img-title">
    <img src="http://www.example.com/example.gif" />
  </div>
  <div class="logos">
    @if (!empty($var) && empty($param))
      @foreach ($var as $key => $value)
        @if (!is_numeric($key))
          <img src="http://www.example.com/{{$key}}.gif" />
        @endif
      @endforeach
    @endif
  </div>
</div>


.header {
  width: 100%;
  margin: 0;
  padding: 1em 0;
  display: flex;
  justify-content: flex-end;
}
.img-title:first-child {
  margin-top:auto;
  margin-bottom: auto;
  margin-right: auto;
}
.logos {
  display: flex;
  flex-wrap: wrap;
  float: right;
}
img {
 margin: 0px 3px;
 width: auto;
 max-width: 100%;
 max-height: auto;
}

如何使它们具有与实际高度相同的高度和宽度？

Answer 1

之所以出现此问题，是因为您在display: flex;上有.logos并且没有设置align-items的值。要解决此问题，您可以在align-items: flex-start;容器上设置align-items: flex-end;，align-items: center;或.logos。

对齐项目 “此属性的初始值是Stretch，这就是为什么flex项默认拉伸到最高的高度的原因。实际上，它们是在拉伸以填充flex容器的-最高的项定义了高度。” >

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

将动态创建的图像缩放到其原始大小

1 个答案: