| Kosten | Суббота, 16 Июня 2018, 23:26 | Сообщение 1 |
| Думаю многие задаются вопросом, как изменить размер фоновых изображений с помощью CSS3, так как с помощью стилей сейчас безусловно намного лучше и качественно можно сделать. В стилистике CSS2 blen фоновые изображения, которые нанесенные на контейнер, сохраняют фиксированные размеры. К счастью, CSS3 вводит background-size свойство, позволяющее растянуть или раздавить фоны. Это идеальный вариант, если вы создаете шаблон с использованием методов адаптивного веб дизайна.
В этой статье представлен HTML-код, позволяющий растянуть фоновое изображение. CSS3 представила новое свойство - background-size которое позволяет изменять размер фоновых изображений. Это означает, что вы можете растянуть изображение горизонтально или вертикально. Вы можете изменить его размер любым способом.
Например, вы можете растянуть фоновое изображение до любого размера, с которым этот элемент применяется.
В следующем примере мы используем параметр background-sizeсо значением 100% 100%, что означает, что он имеет тот же размер элемента - независимо от того, насколько большой фактический образ.
Абсолютное изменение размера
Измерения длины могут применяться с использованием:
Код background-size: width height;
По умолчанию ширина и высота устанавливаются так, чтобы autoсохранить исходные размеры изображения.
Мы можем изменить размер изображения до нового размера, используя абсолютные измерения, такие как px, em, cm и так далее. Соотношение сторон будет изменено, если необходимо, если наше фоновое изображение будет 200 × 200 пикселей, следующий код сохранит эту высоту, но половину ширина.
Код background-size: 100px 200px;
Если определена только одна длина, предполагается, что она является шириной. Высота установлена, auto и изображение будет сохранять его соотношение сторон.
Код background-size: 100px;
/* is identical to */
background-size: 100px auto;
Этот код будет масштабировать наше изображение 200 × 200 до 100 × 100 пикселей.
Относительное изменение размера с использованием процентов.
Если используется процент, размер основывается на содержащем элементе.
Код background-size: 50% auto;
Поэтому ширина фонового изображения зависит от размера его контейнера. Если ширина контейнера составляет 500 пикселей, наше изображение будет изменено до 250 × 250.
Использование процента может быть полезно для гибких конструкций. Измените размер демонстрационной страницы, чтобы узнать, как изменяются размеры.
Масштабирование до максимального размера
Свойство background-size также принимает contain ключевое слово. Это масштабирует изображение, чтобы оно соответствовало контейнеру. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не превышают размеры контейнера:
Код background-size: contain;
Заполнение фона
Также background-size принимает coverключевое слово. Изображение масштабируется, чтобы соответствовать всему контейнеру, но если у него другое соотношение сторон, изображение будет обрезано:
Код background-size: cover;
Размер нескольких фонов
Множественные фоны могут быть изменены с использованием списка значений, разделенных запятыми, которые применяются в том же порядке, например
Код background:
url("sheep.png") 60% 90% no-repeat,
url("sheep.png") 40% 50% no-repeat,
url("sheep.png") 10% 20% no-repeat #393;
background-size: 240px 210px, auto, 150px;
Совместимость с браузером
Последние версии всех браузеров поддерживают background-size без префикса.
Браузер IE8 и ниже не поддерживают свойство. Вы можете использовать фильтр IE для эмуляции содержимого и обложки, но невозможно изменить размер фоновых изображений, не прибегая к трюкам, использующим реальные данные imgза другими элементами.
Все подробно можно посмотреть на Demo странице.
Демонстрация
| | Страна: (RU) |
| |
