[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
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 1208]
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 1125]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 1087]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 1082]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 1073]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 991]
[119]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 984]