Как сделать обрезание картинки в блоке?

Question

[timers]

Собственно задача:

Оригинал картинки


Делаю блок новостей, картинка и сверху название.
Не могу понять как сделать чтобы картинку обрезало и центровало в независимости от ее размера.

Т.е. должно получится так:


Может есть где то примеры?

Comments

[Сергей delphinpro]

фоном по центру и все дела.

Answer 1

[Полина]

Есть еще вариант кроме бэкграунда, если картинка обязательно должна быть img. Правда, этот способ не работает в ИЕ11-. Родителю задаете размеры - в пикселях, процентах, в чем угодно. Внутрь помещаете img со следующими стилями:

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}

Но вообще я тоже предпочитаю не тег img, а свойство бэкграунд, как вам написали в предыдущем ответе, т.к. им куда удобнее управлять и он отлично работает в ИЕ.