Блог

Главная - Вопросы по программированию - как разместить img внутри элемента, высота которого вычисляется с помощью flexbox таким образом, чтобы высота этого элемента не изменялась

как разместить img внутри элемента, высота которого вычисляется с помощью flexbox таким образом, чтобы высота этого элемента не изменялась

#html #css #image #flexbox #height

Вопрос:

эта базовая компоновка стека на основе flexbox отлично работает:

 <body>
<div class="flexcontainer">
  <header>
     header text
  </header>
  <article>
     bugs bunny
  </article>
</div>
</body>

body{
  height: 500px;
}
.flexcontainer{
  height: 500px;
  display: flex;
  flex-direction: column;
}
header{
  height:100px;
  background:lightsalmon;
}
article{
  flex: 1 0 200px;
  background: lightseagreen;
}

корпус, а также флексконтейнер закреплены на высоте 500 пикселей.
заголовок фиксирован на высоте 100 пикселей.
статья имеет гибкий рост 1 и расширяется до 400 пикселей;

здесь все хорошо.

демо: https://jsfiddle.net/6Lkmf5qj/

но теперь я добавляю элемент изображения в статью:

  • внутренняя высота изображения составляет 600.
  • css устанавливает высоту: 100% для тега img.
 <body>
<div class="flexcontainer">
  <header>
  headerino
  </header>
  <article>
  text
  <img src="https://cdn-blob.austria.info/cms-uploads-prod/default/0002/77/thumb_176893_default_gallery_big.jpeg?cachebuster=1625673026" />
  </article>
</div>
</body>

body{
  height: 500px;
}
.flexcontainer{
  height: 500px;
  display: flex;
  flex-direction: column;
}
header{
  height:100px;
  background:lightsalmon;
}
article{
  flex: 1 0 200px;
  background: lightseagreen;
}
img{
  height: 100%;
}

демо: https://jsfiddle.net/6Lkmf5qj/2/

теперь статья увеличивается до 600 пикселей, а тело становится больше.

есть ли способ создать макет стека с фиксированным заголовком и вторым элементом, который занимает оставшееся пространство и помещает изображение во второй элемент таким образом, чтобы это изображение занимало высоту этого элемента без его увеличения?

Метки: , ,