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

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

以下是语法和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;
} 

@如果（！empty（$var）&&empty（$param））
@foreach（$var作为$key=>$value）
@如果（！是数字（$key））
@恩迪夫
@endforeach
@恩迪夫
.标题{
宽度：100%；
保证金：0；
填充：1em 0；
显示器：flex；
证明内容：柔性端；
}
.img头衔：第一个孩子{
页边顶部：自动；
页边距底部：自动；
右边距：自动；
}
.标志{
显示器：flex；
柔性包装：包装；
浮动：对；
}
img{
利润率：0px 3px；
宽度：自动；
最大宽度：100%；
最大高度：自动；
} 

---

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

问题的出现是因为您有

display:flex在
.logos
上，并且尚未设置
对齐项目的值。要解决此问题，您可以设置
align items:flex start，
对齐项目：柔性端或
对齐项目：居中.logo
容器上的code>

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

我决定选择
对齐项目：居中。谢谢你快速回答。