CSS для центрирования img по горизонтали и вертикали без изменения размера

Question

У меня есть код примерно такой:

<div class='image-holder' style='width:128px; height:128px'>
    <img class='thumbnail' src='image1.png'>
</div>

Фактический размер .thumbnail неизвестен и потенциально может быть не точным квадратом.

Так что я пытаюсь не изменять размеры изображения (.thumbnail) вообще, а вместо этого показывать только центр (как по горизонтали, так и по вертикали) изображения внутри элемента .image-holder.

Например, если изображение (.thumbnail) было 256x256, внутренний фрагмент изображения 128x128 должен отображаться внутри .image-holder.

Я открыт для использования фактического элемента img или использования background-image для div. Я экспериментировал с обоими безуспешно.

Я вполне уверен, что могу написать какой-нибудь javascript для выполнения работы, если это необходимо, но я искал, есть ли чистое решение CSS, прежде чем я пойду по этому пути.

Answer 1

Вы должны использовать background-image для этого. Просто удалите повторение по умолчанию и установите background-position: center;

Смотрите здесь:

.image-holder {
  width:128px;
  height:128px;
  border: 1px solid red;
  margin: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

#holder-1 {
  background-image: url('http://via.placeholder.com/350x150');
}

#holder-2 {
  background-image: url('http://via.placeholder.com/100x100');
}

<div id="holder-1" class='image-holder'></div>
<div id="holder-2" class='image-holder'></div>