Flex-box中具有正确纵横比的响应图像

Question

我似乎无法在Flex-box项目内正确获得响应式图像。如果图像是弹性盒项目之一，则效果很好（Jsfiddle）

.parent {
  display: flex;
  width: 100%;
}
.parent input {
  flex: 1;
}
.parent input:focus + img {
  display: none;
}

<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<img src="https://png.icons8.com/metro/40/00000/user.png">
</div>

当图像位于弹性项目中时，它开始出现异常行为。

场景1：图像拉伸会扭曲宽高比（Jsfiddle）

.parent {
  display: flex;
  width: 100%;
  height: 40px;
}
.parent input {
  flex: 1;
}
.parent input:focus + div {
  display: none;
}
.parent img {
  height: 100%;
  max-height: 100%;
  width: auto;
}
.parent .funny {
  display: flex;
}

<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<div class="funny">
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>
</div>

方案2：图像留有空白（Jsfiddle）

.parent {
  display: flex;
  width: 100%;
  height: 40px;
  background: red;
}
.parent input {
  flex: 1;
}
.parent input:focus + div {
  display: none;
}
.parent img {
  height: 100%;
  max-height: 100%;
  width: auto;
}
.parent .funny {
  display: flex;
}

<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<div class="funny">
<div>
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>
</div>
</div>

场景3：在输入获得焦点之前，布局是好的，然后一切中断：Jsfiddle

此情况发生在IE 11 Chrome（版本67.0.3396.87（正式版本）（64位））中，但尚未在Firefox和Edge中进行测试。

我是否有关于Flex-box尚未研究的东西，还是一个bug？

Answer 1

以下代码对我来说似乎很好。 在您的第一个示例中，我只是设置了图像的高度和宽度。

.parent {
  display: flex;
  width: 100%;
}
.parent input {
  flex: 1;
}
.parent input:focus + img {
  display: none;
}

img {
  height: 40px;
  width: auto;
}

<div class="parent">
<img src="https://png.icons8.com/metro/40/000000/graduation-cap.png">
<input />
<img src="https://lh3.googleusercontent.com/-OX10v8tUiCY/AAAAAAAAAAI/AAAAAAAADE8/QcezYUDPvxU/s96-c/photo.jpg">
</div>

对于您共享的第二个示例，再次将img高度设置为40px而不是将其设置为100％似乎对我有用。检查fiddle

与方案3相同。选中fiddle

Answer 2

您仅在<div>中添加了一张图片。

查看此fiddle