Адаптивное изображение с правильным соотношением сторон во 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,или это ошибка?

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%, как мне кажется. Проверьте скрипку

То же самое со сценарием 3. Проверьте скрипку

Answer 2

Вы добавили только одно изображение в <div>.

Проверьте это скрипка