Содержание

Как изменить размер фоновой картинки через CSS3

Оригинал: sitepoint.com/css3-background-size-property

Перевод: Влад Мержевич

В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу 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, но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.

Просмотр демонстрационной страницы с background-size.

CSS3фон

CSS по теме

  • background-size

Статьи по теме

  • Как изменить размер фоновой картинки через CSS3
  • Как растянуть фон на всю ширину окна?
  • Масштабирование фона

background-size ⚡️ HTML и CSS с примерами кода

Свойство background-size масштабирует фоновое изображение, согласно заданным размерам.

Демо

Фон
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size

Синтаксис

/* Keyword values */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;

Значения

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.

Значение по-умолчанию:

background-size: auto;

Применяется ко всем элементам

Спецификации

  • CSS Backgrounds and Borders Module Level 3

Поддержка браузерами

Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse. com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>background-size</title>
    <style>
      div {
        height: 200px; /* Высота блока */
        border: 2px solid #000; /* Параметры рамки */
        background: url('/example/image/mybg.png') 100% 100%
          no-repeat; /* Добавляем фон */
        background-size: cover; /* Масштабируем фон */
      }
    </style>
  </head>
  <body>
    <div>...</div>
  </body>
</html>

Пропорциональное изменение размера изображений с сохранением соотношения сторон

Иногда изображения слишком велики для отображения на веб-странице. Нам не нужен JavaScript, чтобы исправить это. Мы можем пропорционально изменять размеры изображений с помощью тегов изображений HTML или стилей фона CSS. Давайте посмотрим на различные параметры, которые у нас есть для изменения размера изображений, сохраняя при этом их соотношение сторон.

Изменение размеров тегов изображений HTML

Наш первый выбор — установить только одно свойство size, либо width или высота , браузер автоматически рассчитает размер другого края.

Представьте, что у нас есть изображение кота с соотношением сторон 4:3 , другими словами, его размеры 4032 × 3024 , это много кота.

Если мы хотим, чтобы он отображался немного меньше, мы можем установить width на 240 , тогда браузер автоматически рассчитает высоту как 180 .

Есть одно предостережение. Изображения доступны не сразу.

Браузер отобразит страницу, дождется загрузки источника изображения, а затем обновит

высоту элемента изображения. Это, скорее всего, приведет к тому, что браузер отобразит страницу дважды, потому что после обновления высоты изображения все элементы под изображением смещаются вниз.

Это плохая новость для производительности вашей страницы.

Лучше всего установить предполагаемый размер, чтобы браузер мог зарезервировать место.

Но что, если мы не знаем соотношение сторон изображения и получаем квадратное изображение кота? Наш кот не раздавится? Да, да, бедный кот.

Но не бойтесь, мы можем исправить это с помощью CSS.

 изображение {
    подходит для объекта: содержит;
}

Pass cover вместо содержит , чтобы указать браузеру заполнить весь тег изображения кошачьими пикселями.

 изображение {
    объект подходит: обложка;
}

Что делать, если наше изображение нужно ограничить шириной родительского элемента? В этой ситуации мы можем использовать CSS max-width или ширина , чтобы соответствовать изображению.

Используйте max-width: 100% , чтобы ограничить размер, но разрешить меньшие размеры изображения, используйте

width: 100% , чтобы всегда масштабировать изображение в соответствии с шириной родительского контейнера.

 <дел>
    
 
 раздел {
    ширина: 240 пикселей;
    граница: 1px сплошной розовый;
}
картинка {
    максимальная ширина: 100%;
    подходит для объекта: содержит;
}

Далее мы можем использовать CSS для исправления соотношения сторон изображения, узнайте больше о представлении изображений с определенным соотношением сторон.

Изменение размера фоновых изображений CSS

По умолчанию фоновое изображение

будет повторяться поверх фона элемента, если оно меньше, если оно больше, оно не будет масштабироваться, но части изображения не будут видны. В приведенном ниже примере нижняя и правая часть нашего кота не визуализируются.

 <дел> 
 раздел {
    фон: url('cat.jpeg') без повторов;
    граница: 1px сплошной розовый;
}

Мы можем исправить это, установив размер фона собственность. Чтобы разместить изображение внутри элемента, мы используем значение , содержащее . Браузер поместит изображение внутри границ элемента и пропорционально масштабирует его.

 <дел> 
 раздел {
    фон: url('cat.jpeg') без повторов;
    размер фона: содержит; /* масштабирует изображение */
    фоновая позиция: центр; /* центрирует изображение */
    граница: 1px сплошной розовый;
}

Подобно object-fit , мы также можем использовать значение cover , чтобы сообщить браузеру, что элемент должен быть покрыт кошачьими пикселями. Как вы можете видеть ниже, это заставит его уменьшиться настолько, чтобы соответствовать вертикальному пространству, теперь обрезана только правая сторона нашего кота.

 <дел> 
 раздел {
    фон: url('cat.jpeg') без повторов;
    размер фона: обложка;
    граница: 1px сплошной розовый;
}

Мы также можем указать единственное значение width для свойства background-size . Подобно элементу img , высота будет рассчитана автоматически.

 <дел> 
 раздел {
    фон: url('cat.jpeg') без повторов;
    размер фона: 200 пикселей;
    граница: 1px сплошной розовый;
}

Вот оно!

API изображений | Contentful

Введение

API Contentful Images позволяет извлекать и обрабатывать файлы изображений, на которые ссылаются активы.

Представление актива в формате JSON в Contentful выглядит следующим образом:

 "поля": {
    "title": "Playsam Streamliner",
    "файл": {
      "fileName": "quwowooybuqbl6ntboz3.jpg",
      "contentType": "изображение/jpg",
      "подробности": {
        "изображение": {
          "ширина": 600,
          "высота": 446
        },
        "размер": 27187
      },
      "url": "//images.ctfassets.net/yadj1kx9rmg0/wtrHxeu3zEoEce2MokCSi/cf6f68efdcf625fdc060607df0f3baef/quwowooybuqbl6ntboz3.jpg"
    }
  }

В этом справочнике описаны параметры, которые можно добавить к URL-адресу, указанному в поле file.url , для управления и преобразования изображений.

Чтобы загрузить изображения в Contentful, см. здесь.

Примечание: В соответствии с техническими ограничениями размер загружаемого изображения не должен превышать 20 МБ. Изображения, превышающие ограничение по размеру, рассматриваются как активы, и функции преобразования, предлагаемые API, не применяются.

Базовая информация API

Ссылка

Извлечение

Изображение

Вы можете получить исходное изображение. URL-адрес такой же, как и в поле file.url актива .

Получить изображение

Изменение форматов

Формат изображения

Изображение можно преобразовать в другой формат.

Возможные значения:

  • jpg

  • png

  • сеть

  • GIF

  • авиф

По умолчанию используется исходный формат изображения.

Получить изображение

Progressive JPEGs

Вы можете запросить изображение JPEG как прогрессивный JPEG.

Прогрессивный формат JPEG сохраняет несколько проходов изображения с постепенно увеличивающейся детализацией. Пока загружается прогрессивное изображение, зритель сначала видит пиксельную версию более низкого качества, который постепенно улучшается в деталях, пока изображение полностью не загрузится. Это отображает изображение как можно раньше, чтобы сохранить макет в соответствии с дизайном.

Получить изображение

8-битный PNG

Вы можете запросить изображение PNG как 8-битный PNG.

8-битные изображения PNG поддерживают до 256 цветов и весят меньше, чем стандартный 24-битный эквивалент PNG. 8-битный формат PNG в основном используется для простых изображений, таких как значки или логотипы.

Получить изображение

AVIF

Для изображений, преобразованных в формат AVIF, применяются ограничения размера изображения, указанные в разделе «Технические ограничения». Кроме того, есть 9Мегапиксельное ограничение на размер исходного изображения. Ограничение применяется ко всем уровням обслуживания (см. Технические ограничения).

Изменение размера и обрезка

Укажите ширину и высоту

Вы можете изменить размер изображения до нужной ширины и высоты. Максимально допустимое значение составляет 4000 пикселей. По умолчанию используется исходная ширина и высота изображения.

Получить изображение

Изменение поведения при изменении размера

По умолчанию размеры изображений изменяются в соответствии с указанными размерами. Вы можете запросить другое поведение, используя соответствует параметру .

Возможные значения:

  • pad : Измените размер изображения до указанных размеров, при необходимости дополнив изображение.

  • fill : Измените размер изображения до указанных размеров, при необходимости обрезав изображение.

  • масштаб : Измените размер изображения до заданных размеров, при необходимости изменив исходное соотношение сторон.

  • кадрирование : Обрезка части исходного изображения до заданных размеров.

  • thumb : Создание миниатюры из изображения.

pad поведение использует цвет фона в качестве цвета заполнения.

Получить изображение

Указать область фокусировки

Вы можете выбрать область фокусировки для изменения размера при использовании типа подгонки pad , fill , урожая или большого пальца . Область фокусировки не влияет на тип подгонки по умолчанию или шкалу .

Возможные значения:

  • центр , верх , правый , левый , нижний .

  • верхний_правый , верхний_левый , нижний_правый , нижний_левый .

  • лицо для самого большого обнаруженного лица.

  • лиц для всех обнаруженных лиц.

По умолчанию центр .

Получить изображение

Обрезка закругленных углов и круга/эллипса

Вы можете добавить к изображению закругленные углы или обрезать до круга/эллипса.

Возможные значения:

Значение по умолчанию: 0 .

Закругленные углы используют цвет фона в качестве цвета заполнения, если формат jpg и поведение изменения размера pad , то по умолчанию используется белый цвет.

Получить изображение

Обработка изображения

Качество

Вы можете изменить качество изображения, выраженное в процентах от 1 и 100 . Значение качества игнорируется только для 8-битных PNG.

Получить изображение

Цвет фона

Вы можете выбрать цвет фона при использовании углового радиуса или типа подгонки площадки .

No related posts.