Изображение увеличивает высоту родительского элемента flex, но ведет себя со странным хаком в chrome и сафари

Question

У меня есть image в гибком контейнере (назовем его child). Сам контейнер имеет flex: 1, поскольку он также принадлежит к флексу parent с flex-direction: column, а child ведет себя как ожидалось (принимает 100% высоты родительского элемента) перед представлением ситуации с изображением.

При добавлении изображение до child, изображение расширяется на child, чтобы соответствовать его высоте, эффективно child нажатие parent.

Использование object-fit: cover на изображении не может помочь в этой ситуации!

Похоже, это нормальное поведение в Chrome, Firefox и Safari.

Вот странная вещь: добавление свойства height к child устраняет проблему на Chrome и Safari, но не Firefox. Значение этой высоты не имеет большого значения, если оно не больше, чем вычисленная высота child - child содержится в 100% height из parent вместе с изображением - даже если значение высоты child установлено на 1px. Удивительно, но height: 100% на child не приводит к такому же поведению.

Любые идеи по этому поводу будут высоко оценены. Моя цель - заставить image всегда занимать 100% of child - независимо от ширины области просмотра.

Вот код для иллюстрации

#parent {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#child {
  flex: 1;
  height: 1px;
  /* the weird hack for chrome and safari - ff ignores it */
}

#child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div id="parent">
  <div id="child">
    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
  </div>
</div>

Я также добавил несколько изображений для большего контекста. Это урожай всей страницы. Первое изображение из меньшего видового экрана (ширина указана для devtools), а второе - для всей страницы (devtools скрыто). Второе изображение показывает, что image расширило child, чтобы в конечном итоге создать sh контейнер с зеленым фоном за сгибом, в результате чего появилась полоса прокрутки.

child - оболочка изображения, parent - это компонент с белым фоном и некоторыми отступами. Вы понимаете, что у parent есть брат (зеленый фон), а у его родителя (контейнер с зеленой границей и радиусом границы) есть display: grid и grid-template-rows: 1fr auto;.

. Следует также отметить, что самый верхний Элемент -level имеет высоту 100vh, и все его дочерние элементы отображаются в нем. По сути, не должно быть полосы прокрутки.

Надеюсь, вы поняли идею.

Answer 1

Это то, что вы хотите сделать? Вы также можете увидеть это здесь: https://codepen.io/teanbiscuits/pen/GRJmPgo

#parent {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  border:2px solid green;
  border-radius:20px;
  overflow:hidden;
}

#child {
  position:relative;
}

#child img {
  position:absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#text {
  background-color:green;
}

<div id="parent">
  <div id="child">
    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
  </div>
  <div id="text">
    <h2>some title here</h2>
    <p>Some description here</p>
  </div>
</div>

Answer 2

Пожалуйста, попробуйте это. Просто выберите предпочтительный объект подгонки.

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
#parent {
  height: calc(100vh - 20px);
  display: flex;
  padding: 10px;
  flex-direction: column;
}

#child {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

#child img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div id="parent">
  <div id="child">
    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />
  </div>
  <div id="text">
    <h2>Some title here</h2>
    <p>Some description here</p>
  </div>
</div>