@timers

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

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

Оригинал картинки
5ba50fa60c15c350245484.jpeg

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

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

Может есть где то примеры?
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
@paulinekorkina
Верстальщик
Есть еще вариант кроме бэкграунда, если картинка обязательно должна быть 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, а свойство бэкграунд, как вам написали в предыдущем ответе, т.к. им куда удобнее управлять и он отлично работает в ИЕ.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы