Растянуть картинку на весь блок
Чтобы растянуть картинку на весь блок, надо указать свойство background-size: cover .
.bg < background: url(image.jpg) no-repeat; background-size: cover; >
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Вставить картинку
- Градиент
- 4 видов границ (border)
- 4 видов тени
- Спрайт
- Сделать картинку чёрно-белой
- Растянуть картинку на весь блок
- Несколько картинок на фоне
- Изменить прозрачность объекта
Как img во весь div?
есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
сделать это если картинку пихать из css бекграундом и background-size:cover; — получилось, но надо сделать через img
зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.
благодарю и буду рад если поможете.
- Вопрос задан более трёх лет назад
- 91298 просмотров
Свойство background-size
Свойство background-size задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.
Синтаксис
Ключевые слова
| Значение | Описание |
|---|---|
| auto | Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции. |
| cover | Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком. |
| contain | Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте). |
Значение по умолчанию: auto .
Использование
Единицы для размеров и auto могут быть использованы в различных комбинациях, например, так: auto 20px , или 30% 20px , или auto 30% и так далее. В этом случае первый параметр задает размер фона по ширине, а второй параметр — размер фона по высоте. Если указан один параметр — то он будет задавать размер фона и по ширине, и по высоте одновременно.
Пример
Сейчас фоновая картинка будет иметь свой натуральный размер:
Пример
Сейчас фоновая картинка будет размер 300px на 400px (в нашем случае пропорции картинки исказятся):
Пример
Сейчас фоновая картинка будет размер 400px на 400px (в нашем случае пропорции картинки исказятся):
Пример
Сейчас фоновая картинка будет размер 400px по горизонтали, а по вертикали ее размер подстроится так, чтобы пропорции не исказились:
Пример
Сейчас фоновая картинка будет размер 400px по вертикали, а по горизонтали ее размер подстроится так, чтобы пропорции не исказились:
Пример . Значение contain
Посмотрите на работу значения contain :
.elem < background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
Пример . Значение cover
Посмотрите на работу значения cover :
.elem < background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
Пример . Улучшим работу cover
Работу значения cover можно улучшить, если отцентрировать картинку с помощью свойства background-position (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):
.elem < background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
. Значения в процентах
В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):
Пример . Значения в пикселях и процентах
В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):
Пример . Значение auto для одной из сторон + проценты
В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так — картинка будут оставаться неискаженной):
Пример . Значение auto для одной из сторон + пиксели
В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:
Пример . Значение 100% для обеих сторон
Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100% , можно было просто написать одно значение):
Пример . Значение contain
Сейчас картинка будет занимать всю ширину или всю высоту с сохранением пропорций. Поуменьшайте окно браузера, чтобы увидеть, что картинка в различных состояниях будет занимать или всю ширину или всю высоту:
Пример . Значение cover
Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:
Сравните с тем, как будет выглядеть картинка по умолчанию (при значении auto). Поуменьшайте окно браузера, чтобы увидеть отличия:
Смотрите также
- свойство background ,
представляющее собой свойство-сокращение для фона
Как сделать картинку на весь экран. WordPress?
Подскажите, пожалуйста, как сделать картинку на весь экран? Сайт на Вордпресе. По ссылке картинка — https://s.mail.ru/5Xh2/2KQLY5Mn3 — то что на данный момент, длинной красной стрелкой указано как бы я хотел чтобы было.
На сайте с 04.01.2012
30 августа 2017, 12:17
Может проблема в размере изображения? или нужно растянуть то что есть?
NVMe VDS (https://well-web.net/nvme-vps) с поддержкой 24/7 — от 545 руб.! Безлимитный хостинг (https://well-web.net/ssd-hosting) — от 129 руб.! Домен в подарок! Перенос бесплатно! Заказывайте сейчас, и получите скидку 50%! Заходи! (https://well-web.net/limited-offers)
На сайте с 30.09.2016
30 августа 2017, 12:21
На вордпрессе — так же, как и везде, через css. Конкретика — в зависимости от разметки.
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
На сайте с 15.05.2017
30 августа 2017, 12:44
Al Koleseo:
Может проблема в размере изображения? или нужно растянуть то что есть?
Картинка любого разрешения делается также, как по ссылке.
Al Koleseo:
На вордпрессе — так же, как и везде, через css. Конкретика — в зависимости от разметки.
Через css, а как называется класс, который за это отвечает? Тема Hestia, не про версия, про разметку ничего сказать не могу, так как не знаю, что именно от нее зависит. По ссылке пример, как хотелось бы — https://s.mail.ru/CaqL/LY9VVMymi.
На сайте с 01.01.2017
30 августа 2017, 12:58
Al Koleseo, думаете кому-то о чем-то говорит название Hestia? Тем для вордпресса десятки, если не сотни тысяч! И каждая (особенно примиум) уже давно делается со своими финтами и расколбасами. Порой от дефолтных шаблонов остаются только названия. Даже темы, с казалось бы элементарным функционалом раздуты до неимоверных размеров. Всюду суют безумные фреймворки. Судя по скринам, ваша проблема заключается исключительно в пропорциях заданного изображения в бэкграунде. Засунете картинку с верными пропорциями и закроете вопрос.
прострация
На сайте с 15.05.2017
30 августа 2017, 13:18
widg:
Засунете картинку с верными пропорциями и закроете вопрос.
Пробовал засунуть картинку со второго скрина, тоже самое получается, а на скрине 2 на сайте все норм.