[315]
26 Фев 2015, 11:56

CSS object-fit или background-size для img

Вам когда-нибудь приходилось писать костыль, что бы растянуть изображение на весь экран?
Например такой костыль реализован на главной странице webonrails.

Конечно можно использовать background-size:cover, но что если нужно именно изображение в теге img?

Наконец об этом подумали разработчики спецификации и браузеров. Встречайте новое CSS свойство object-fit. По сути оно аналогично background-size.

.img__contain { object-fit: contain; /* изображение сжимается или растягивается, чтобы полностью поместиться в область с сохранением пропорций */ }
.img__fill { object-fit: fill; /* изображение растягивается на всю область блока */ }
.img__cover { object-fit: cover; /* изображение растягивается на всю область блока с сохранением пропорций и центрированием */ }
.img__scale-down { object-fit: scale-down; /* изображение только сжимается, чтобы полностью поместиться в область с сохранением пропорций */ }

Это уже работает в webkit-браузерах и вот вот будет работать в firefox. Скорее всего, если вы это читает, то оно уже там работает. IE? Не смешите.

#css, #html

Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки: