Как передать максимальную высоту изображению?

Question

[leeroyjenkins176]

Есть такой пример
Корневой элемент root имеет определенную ширину. Нужно добиться следующего поведения:
1) Высота/ширина фото не должна быть больше высоты корневого элемента
2) Размеры img-wrapper должны соответствовать размерам фото.
То есть если root имеет размеры 1000х200, а фото 400х400, то размеры обертки и фото должны быть 200х200.
Если фото 100х100, то оно не увиличивается до 200.

Comments

[Ankhena]

Гуглите object-fit

[leeroyjenkins176]

Ankhena, как он тут поможет, если вопрос про размеры тега img, а не про то, как он выводит результат?

[Ankhena]

leeroyjenkins176, либо переформулируйте вопрос и последнее предложение либо всё таки погуглите.

[sergski]

object-fit как раз и управляет размерами изображения в зависимости от размеров контейнера. И в верстке оставьте только div.root с img

[leeroyjenkins176]

Ankhena, в моем примере фото выходит далеко за пределы родительского блока. Его высота должна равняться высоте красной рамки (родитель), а красная рамка по ширине должна быть равна ширине фото
Такое же поведение https://codepen.io/coyibe2003/pen/GRLEPBL, но тут высота прописана прямо для img, а не для root

[Ankhena]

leeroyjenkins176, нужно разобраться с контейнерами и их размерами, а потом всё таки object-fit

[leeroyjenkins176]

sergski, object-fit определяет как отрисовывать содержимое тега img, он не имеет отношения к самими размерам тега.
Вложенность я уменьшить не могу, разве увеличить

[Сергей delphinpro]

<div class="root">
 <div>
   <div class="f">
     <div class="img-wrapper">
       <img src="https://placehold.co/600x400" alt="">
     </div>
   </div>
 </div>
</div>

* {
  box-sizing: border-box;
}

.root {
  height: 200px;
}

div {
  padding: 5px;
  border: 3px solid;
}

.root div:not(.img-wrapper) {
  height: 100%;
}

.img-wrapper {
  border-color: #f00;
  max-height: 100%;
  display: flex;
}

img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}

.f {
  display: flex;
}

[leeroyjenkins176]

Сергей delphinpro, firefox резервирует ширну под фото, как если бы оно выводилось в оригинальных размерах