Как показать середину изображения в div, используя css?

Question

Как показать среднюю часть изображения в div, используя css?

https://jsfiddle.net/yn7hubkd/

CSS:

.out{ 
    width: 500px; 
    height: 500px; 
    overflow: hidden; 
} 

HTML:

<div class="out"> 
    <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg"> 
</div> 

я получаю этот выход: http://i.imgur.com/gYzP1xo.png

Но я хочу, чтобы получить его, как это (с центром в x- направление, черный квадрат - изображение, а красный квадрат - div-класс): http://i.imgur.com/9QGVYtN.png

В результате выход: http://i.imgur.com/EqzM7QO.png

Answer 1

Такое поведение может просто быть достигнуто путем использования изображения в качестве фона. Просто установите background-size: cover; и background-position: center; для заполнения контейнера с изображением и поместите его в центре:

.out { 
 
    width: 500px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    background-image: url(https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
}

<div class="out"></div>

В случае, если вы вынуждены использовать <img /> тег, просто добавить отрицательное левое поле 50%:

.out { 
 
    width: 500px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
} 
 
.out img { 
 
    margin-left: -50%; 
 
}

<div class="out"> 
 
    <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg"> 
 
</div>

Answer 2

Вы можете расположить его в центре этого правила CSS:

.out img { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 

https://jsfiddle.net/456jLdfx/1/

Это ставит его в ширину контейнера 50% и перемещает его обратно влево на 50% от своей собственной ширины, таким образом, центрирование это горизонтально.

Дополнительное примечание: Это работает для любой ширины изображения, в отличие от margin-left: -50%;, который работает только в этом случае, потому что изображение точно в два раза шире, как контейнер: 500px контейнер, 100px изображение)

Answer 3

.out { 
 
    width: 500px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    background: url('https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg') center center; 
 
}

<div class="out"></div>

Answer 4

Просто добавьте это в CSS

Пожалуйста Найти обновленную скрипку ниже.

.out img{ 
 
    margin: 0 auto; 
 
    max-width: 90%; 
 
    display: block; 
 
}

Your Updated Fiddle

Expalnation: margin:0 auto; регулировки уровня блока маржу элемента сверху и снизу на 0 и левый и правый автоматический (т.е. он будет рассчитывать автоматически по отношению к родителю.)