html - Flex-box 中具有正确宽高比的响应图像

Question

我似乎无法在 flex-box 元素中正确实现响应式图像。如果图像是 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>

当图像在 flex 元素中时，它开始表现不正常。

场景 1:图像拉伸(stretch)扭曲纵横比 (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 有什么我没有研究过的吗，或者它是一个错误？

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