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

Question

[Emmet1]

Ширина и высота item 100%.
Высота img 100% (на всю высоту item). Так как картинка шире блока item она с помощью hiden обрезается. В итоге все помещается красиво в блок item.
Можно ли сделать так, чтобы центр картинки был в центре экрана (блока item)? На данный момент, девушка, которая на центре картинки, обрезается сбоку при небольшом разрешении экрана.

<div class="item">
       <img src="img.png" alt="">
     </div>

Answer 1

[iBird Rose]

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/

Comments

[Emmet1]

max-width будет искажать пропорции картинки. потому у меня width:auto

[Emmet1]

Картинка шире блока в котором находится

[iBird Rose]

Emmet1: max-width не искажает пропорции. если ты не трогаешь height и max-height

[iBird Rose]

Emmet1:

Картинка шире блока в котором находится

так для тебя это нормально или ты хочешь чтобы она уместилась в блок? если хочешь чтобы уместилась - используй max-width: 100% и убери другие стили которые трогают height картинки

[Emmet1]

iBird Rose: как я написал в самом начале, height 100%. То есть, картинка всегда на всю высоту. За счет того, что она шире блока item она и на всю ширину. Остатки картинки, которые не влезают в блок обрезаеются overflow hidden

[iBird Rose]

Emmet1: ну тк для тебя это нормально то что она шире и обрезается через overflow hidden? если да, то используй остальные стили которые я написал в ответе для центрирования картинки по центру

[Emmet1]

iBird Rose: да, для меня нормально что шире. но при этом центр картинки должен быть совместим с центром item

[iBird Rose]

Emmet1: ок. вот используй text-align: center; для .item для центрирования картинки по горизонтали. и либо flex либо before - для центрирования картинки по вертикали

[Emmet1]

iBird Rose: text-align: center не работает. это первое что мне пришло в голову. Вот https://jsfiddle.net/uvpgwgan/1/

[iBird Rose]

Emmet1: используй flex https://jsfiddle.net/uvpgwgan/2/

[iBird Rose]

Emmet1: еще так можно https://jsfiddle.net/uvpgwgan/3/

[Emmet1]

iBird Rose: второй способ интересный. спасибо

[Алексей Бурлака]

Emmet1:всё-таки, вторым способом выравнивание не работает: https://jsfiddle.net/wxynfb37/
Лучше рассмотрите вариант через flex.
Кликабельные примеры внутри для понимания сути:
html5.by/blog/flexbox

[iBird Rose]

Алексей Бурлака: че эт не работает? картинка по центру data3.floomby.com/files/share/29_1_2017/16/bw3dLSd...

[Алексей Бурлака]

Да, сейчас посмотрел ещё раз — подтверждаю. Был неправ. Почему-то при предыдущем просмотре мне показало, что картинка прижата к левому краю

[Алексей Бурлака]

Вспомнил. Проверьте свой код с такими параметрами блока:
.item {
width:600px;
height:100px;
...

[iBird Rose]

Алексей Бурлака: решается это заданием display: block; для картинки https://jsfiddle.net/wxynfb37/1/

Answer 2

[ya_yshel_rabotati_v_teleg]

.item{
   background-size: cover;
   background-position: 50%;
}

<div class="item" style="background-image:url(img.png);">
</div>

Comments

[Emmet1]

увы, img трогать нельзя. Нужно оставить существующую структуру

[ya_yshel_rabotati_v_teleg]

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

[Emmet1]

ya_yshel_rabotati_v_teleg: должна обрезаться, если не влазит.
В том то и сложность, центрировать картинку без скриптов (если возможно), которая по сути шире родителя. Решил спросить, вдруг есть какой-то костыль о котором я не знал