Блог

Я хочу иметь контейнер, который включает изображение и заголовок. Контейнер всегда должен быть одинакового размера, высота заголовка может измениться.

На мой взгляд, заголовок должен иметь автоматическую высоту в зависимости от его размера, а остальная высота контейнеров будет выделена изображению.

Я попытался сделать это с div, и я работал безупречно. Когда я заменяю заполнитель div на фактический тег изображения, изображение будет занимать 100% высоты контейнера, а не его выделенного гибкого пространства в контейнере.

Почему это так и как я могу это исправить?

Пример, показывающий разницу между тегом div и тегом изображения: https://codepen.io/lkssmnt-the-lessful/pen/QWqbxNK?editors=1100

 .project {
  height: 500px;
  width: 500px;

  display: flex;
  flex-direction: column;
}

.project img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
 

Добавить overflow: hidden в .img тег. — Однако это приводит к негативному эффекту обрезки нижней части изображения.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project {
  height: 500px;
  width: 500px;
  border: 5px solid red;
  margin: 1rem;

  display: flex;
  flex-direction: column;
}

.project p {
  padding: 1rem;
}

.project img {
  overflow: hidden;
  height: 100%;
  width: 100%;
  
  object-fit: cover;
}

.project .test {
  height: 100%;
  width: 100%;
  background: beige;
} 

 <div class="wrapper">
  
  <div class="project">
    <div class="test"></div>
    <p>Project 1</p>
  </div>
  
  <div class="project">
    <img src="https://images.unsplash.com/photo-1518676590629-3dcbd9c5a5c9?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;auto=formatamp;fit=cropamp;w=987amp;q=80">
    <p>Project 2</p>
  </div>
  
  
</div>