Карточка профиля - размещение изображения в нижнем центре моего div

#html #css

#HTML #css

Вопрос:

Я пытаюсь разместить свое изображение внизу по центру, вот так:

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

 .card-container{
  width: 20vw;
  height: 45vh;
  background-color: aliceblue;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.top-card{
  background-image: url(/images/bg-pattern-card.svg);
  width: 100%;
  height: 40%;
  border-radius: 10px 10px 0 0 ;
  position: relative;
}

.top-card img{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
  position: absolute;
  left: 40%;
  bottom: -40px;
  
}

 <div class="card-container">
      <div class="top-card">
        <img src="/images/image-victor.jpg" alt="icon" />
      </div>
      <div class="bottom-card">

      </div>
    </div>

Ответ №1:

Используется justify-content: center для центрирования изображения по горизонтали. Затем align-items: flex-end расположить изображение внизу родительского элемента.

Затем вы можете использовать transform: translateY , чтобы сдвинуть изображение на половину собственной высоты изображения.

 .card-container {
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
}

.top-card {
  background-image: url(http://placekitten.com/900/300);
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.top-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
  transform: translateY(45px);
}

 <div class="card-container">
  <div class="top-card">
    <img src="http://placekitten.com/100/100" />
  </div>
  <div class="bottom-card"></div>
</div>