Как задать max-width для background-image?
Фоновые картинки в div подгружаются динамически Как сжать фоновое изображение если оно больше родительского объекта, но не растягивать его если меньше?
P.S.: background-size: contain; растягивает маленькие изображения, а этого требуется избежать.
Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 19 апр 2016 в 8:46
1,312 10 10 серебряных знаков 25 25 бронзовых знаков
По-моему можно сделать размер родительского блока по содержимому. Вот только тег не помню.
– user208501
19 апр 2016 в 9:40
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Чистым CSS это не делается.
Если вы говорите, что изображения подгружаются динамически, значит, есть какой-то javascript, который это делает. Так, после загрузки изображения, можно проверить его размер, сопоставить с размером блока, и поменять background-size . При этом, если размер блока может меняться со временем, имеет смысл пересчитывать background-size при изменении размеров (как правило, достаточно подписаться на событие window.resize ).
Впрочем, если таких блоков много, вышеописанный подход будет вызывать лаги. Кроме того, в некоторых браузерах для background-image не поддерживается anti aliasing, что приводит к заметному ухудшению качества картинки при масштабировании.
Возможно, вам стоит использовать или вместо того, чтобы динамически менять фон?
Так же можно придумать такую конструкцию: основному не задавать фон. Вместо этого поместить внутрь еще один или с абсолютным позиционированием и max-width , и задать фон ему. Тут, правда, начнутся проблемы с вертикальным выравниванием, да и вообще это не очень хорошее решение: html код потеряет в читаемости. Впрочем, работать будет быстрее, чем подписка на события, так как меньше программных манипуляций с DOM.
Свойство 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 ,
представляющее собой свойство-сокращение для фона
Resizing background images with background-size
The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.
Tiling a large image
Let’s consider a large image, a 2982×2808 Firefox logo image. We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300×300-pixel element. To do this, we can use a fixed background-size value of 150 pixels.
HTML
div class="tiledBackground">div>
CSS
.tiledBackground background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; >
Result
Stretching an image
You can also specify both the horizontal and vertical sizes of the image, like this:
background-size: 300px 150px;
The result looks like this:
Scaling an image up
On the other end of the spectrum, you can scale an image up in the background. Here we scale a 32×32 pixel favicon to 300×300 pixels:
.square2 background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; >
As you can see, the CSS is actually essentially identical, save the name of the image file.
Special values: contain and cover
In addition to values, the background-size CSS property offers two special size values, contain and cover . Let’s take a look at these.
contain
The contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing the example below to see this in action.
HTML
div class="bgSizeContain"> p>Try resizing this element!p> div>
CSS
.bgSizeContain background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; resize: both; overflow: scroll; >
Result
cover
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.
HTML
div class="bgSizeCover"> p>Try resizing this element!p> div>
CSS
.bgSizeCover background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; resize: both; overflow: scroll; >
Result
See also
- background-size
- background
- Scaling of SVG backgrounds
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on Sep 12, 2023 by MDN contributors.
Your blueprint for a better internet.
Как изменить размер фоновой картинки через CSS3
В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.
Абсолютное изменение размера
Могут применяться единицы измерения.
background-size: ширина высота;По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.
Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:
background-size: 100px 200px;Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
background-size: 100px; /* аналогично */ background-size: 100px auto;Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Относительное изменение размера через проценты
Если применяются проценты, размеры основываются на элементе, а НЕ изображении:
background-size: 50% auto;Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 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 для эмуляции значений content и cover, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.