@Emmet1

Как выровнять картинку по центру?

Ширина и высота item 100%.
Высота img 100% (на всю высоту item). Так как картинка шире блока item она с помощью hiden обрезается. В итоге все помещается красиво в блок item.
Можно ли сделать так, чтобы центр картинки был в центре экрана (блока item)? На данный момент, девушка, которая на центре картинки, обрезается сбоку при небольшом разрешении экрана.
<div class="item">
       <img src="img.png" alt="">
     </div>
  • Вопрос задан
  • 982 просмотра
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
UPD:
используй flex для .item
.item {
    display: flex;
    align-items: center;
    justify-content: center;
}

https://jsfiddle.net/uvpgwgan/2/
или же с помощью translate:
.item img{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

https://jsfiddle.net/uvpgwgan/3/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ya_yshel_rabotati_v_teleg
.item{
   background-size: cover;
   background-position: 50%;
}

<div class="item" style="background-image:url(img.png);">
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы