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

#html #css #position

#HTML #css #изображение #позиция #css-позиция

Вопрос:

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

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

Ответ №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>

1. Я должен использовать тег img

2. Пожалуйста, обратите внимание: это (второе решение) работает только потому, что в данном конкретном случае изображение ровно в два раза шире контейнера. В противном случае вам нужно немного больше (см. Мой Ответ)

Ответ №2:

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

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

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

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

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

Ответ №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>

Ответ №4:

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

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

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

Ваша обновленная скрипка

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