Background image размер: Свойство background-size — размер картинки фона

CSS background-size | TuHub

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово (cover или contain), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto. Например:

background-size: cover;       /* ключевое слово */
background-size: contain;     /* ключевое слово */
background-size: 100% 50%;    /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto;    /* не ключевое слово + плюс значение 'auto' */

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

Если указано только одно не ключевое значение, то второе считается как auto.

Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).

Синтаксис свойства

Значения свойства

• <length> —  значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.
• <percentage> — значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
• contain — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
• cover — масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
• auto — ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
  • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
  • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
  • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово contain.
  • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
  • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.

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

CSS3 Background-image options

IE

9

0.09%

10

0.01%

11

0.44%

Edge

105

0.8%

106

3.08%

107

0.25%

Firefox

104

0.07%

105

1.51%

106

0.68%

107

0.01%

Chrome

105

6.01%

106

15.7%

107

0.64%

108

0.02%

109

0.01%

Safari

15.6

1.63%

16. 0

0.5%

16.1

0.07%

16.2

0%

Safari on iOS

15.6

6.72%

16.0

4.55%

16.1

0.24%

Chrome for Android

107

40.28%

Полная поддержка

Частичная поддержка

С префиксом

Не поддерживается

Данные с сервиса caniuse.com

Пример

Ниже вы увидите пример использования свойства background-size:

Как изменить размер фона в Photoshop

Как партнер Amazon, мы зарабатываем на соответствующих покупках.

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

Быстрая Навигация

• Как изменить размер фона в Photoshop
  • Разблокируйте фоновый слой 
  • Команда размера холста
  • Относительный вариант
  • Инструмент обрезки
  • Инструмент для обрезки
  • Раскрыть все
• Автоматически подогнать изображение под размер холста
• Заключение

Как изменить размер фона в Photoshop

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

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

Здесь мы подробно опишем, как можно изменить размер холста, используя функции и инструменты, которые не повлияют на качество изображения. Вы также узнаете, как заполнить расширенный холст любым цветом или заливкой с учетом содержимого. Давайте перейдем к основам изменения размера фона с помощью Adobe Photoshop CC.

Разблокируйте фоновый слой 

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

Чтобы разблокировать фоновый слой, щелкните значок замка рядом со слоем. 

Команда размера холста

Чтобы начать этот процесс, загрузите изображение в Photoshop. К показать некоторое пространство вокруг изображения, если вы хотите увеличить размер фона, рекомендуется уменьшить масштаб, нажав CTRL+ или CMD+.

Основной функцией изменения размера вашего фона является функция «Размер холста». Чтобы открыть окно размера холста, перейдите в меню «Изображение» и нажмите «Размер холста». Кроме того, вы можете воспользоваться сочетанием клавиш и открыть окно «Размер холста», нажав CTRL + ALT + C в Windows или CMD + OPTION + C на Mac.

Текущий размер холста

В диалоговом окне «Размер холста» в первом разделе указывается текущий размер холста с использованием пикселей в качестве единицы измерения и указанием значений ширины и высоты. 

Новый размер холста

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

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

Введите ширину и высоту в пикселях (например, 900 в ширину и 600 в высоту) в зависимости от того, где вы хотите их использовать. Вы также можете выбрать «Процент» в раскрывающемся меню и выбрать заданный процент, который вы хотите уменьшить или увеличить. 

Ведущий

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

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

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

Цвет расширения холста

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

Чтобы заполнить прозрачные края холста, вы можете выбрать изображение внутри с помощью инструмента выделения, инвертировать выделение и заполнить его с помощью заливки, градиента или Контент осведомлен инструмент.

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

Относительный вариант

Следующий способ изменения размера холста также присутствует в Canvas Command, но он используется с определенной целью — равномерно разделить расширенный фон на все четыре стороны.

В полях «Ширина» и «Высота» вы можете увидеть флажок «Относительно». При его использовании будут применяться относительные значения для нового размера.

Относительный вариант лучше всего использовать, когда вы используете проценты. Например, чтобы увеличить размер, введите положительное значение (например, 20%), а чтобы уменьшить размер, введите отрицательное значение (например, -20%).

Инструмент обрезки

Когда ваше изображение меньше размера холста, вы можете использовать команду «Обрезать», чтобы избавиться от областей без информации. Инструмент работает как настоящий инструмент обрезки, где удаление нежелательных или бесполезных пикселей совершенно безопасно. 

1. Перейдите в меню «Изображение» и выберите «Обрезать» в раскрывающемся меню. 
2. Когда появится всплывающее окно для обрезки, выберите параметр «На основе» в качестве «Прозрачные пиксели».
3. Нажмите ОК.
4. Это действие обрежет лишнюю часть изображения.

Инструмент для обрезки

Вот еще один способ изменить размер фона в Photoshop. Мы будем с помощью инструмента кадрирования для этого метода.

1. Открыть изображение в Photoshop или загрузите его, перетащив из папки назначения.
2. Скопируйте фоновый слой выбрав слой на панели, перетащите его в нижнюю часть панели «Слои» и отпустите курсор на значке «Создать новый слой».
3. Выберите инструмент «Обрезка» на панели инструментов слева или нажмите C на клавиатуре, чтобы активировать его.
4. Когда вы выберете инструмент обрезки, вы заметите, что трансформирующиеся контуры отображаются по краям изображения. 
5. Перетащите контуры до нужного размера и соответственно увеличьте размер холста.
6. Чтобы уменьшить размер холста, перетащите контур на внутреннюю сторону.
7. Нажмите на значок проверки на панели параметров вверху. Это подтвердит процедура обрезки. Вы также можете нажать клавишу ввода в Windows или клавишу возврата на Mac.

Раскрыть все

Когда ваше изображение больше, чем размер холста, использование команды «Показать все» изменит размер холста и сделает его достаточно большим, чтобы вместить все детали внутри него. Другими словами, ваш холст становится достаточно большим, чтобы показать большое изображение. 

1. Откройте Photoshop и выберите «Файл» > «Создать».
2. Выберите размер шаблона (по умолчанию в Photoshop размер 7×5 дюймов) и нажмите «Создать».
3. Перетащите свое изображение (с большими размерами) в этот новый документ.
4. Вы заметите, что видна только часть вашего изображения. Это показывает, что он превышает размер холста.
5. Перейдите в меню «Изображение» и выберите «Показать все» в раскрывающемся списке.
6. Размер холста будет увеличен, чтобы показать остальную часть изображения.

Автоматически подогнать изображение под размер холста

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

• Перетащите изображение прямо из окна Explorer/Finder в документ Photoshop. Он скопирует изображение как смарт-объект, чтобы при изменении размера не терялись пиксели и сохранялось качество.
• Перейдите в меню «Редактирование/ Photoshop» > «Установки» > «Основные». Установите флажок Всегда изменять размер во время размещения и Всегда Создать смарт-объект на Размещение.

Заключение

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

[kvCORE] Увеличение размеров изображений

[kvCORE] Увеличение размеров изображений

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

S

Автор Шон Роузманн. Обновлено более недели назад

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

Фоновое изображение

Первым параметром, который появляется в списке настроек вашего веб-сайта, является Фоновое изображение, которое отображается в заголовке вашего веб-сайта. Если вы хотите загрузить свое собственное изображение, вы можете сделать это здесь.

Рекомендуемые размеры: 1600 пикселей в ширину и 650 пикселей в высоту.

СОВЕТ: Чтобы сократить время загрузки веб-сайта для ваших посетителей, попробуйте использовать файл изображения меньшего размера, избегая изображений сверхвысокого разрешения. Чем больше размер файла, тем дольше он загружается на ваш сайт.

Дополнительный логотип

Второй параметр, который появляется в списке настроек вашего веб-сайта, — это возможность загрузить дополнительный логотип.

Рекомендуемые размеры: 512 пикселей в ширину и 512 пикселей в высоту. Вам нужно будет изменить размер и/или обрезать изображение до квадратного формата, чтобы оно выглядело лучше всего.

Сообщения в блоге

Несмотря на то, что при добавлении изображения в сообщение в блоге нет строгих размеров изображения, максимальный размер файла составляет 2 МБ.

Изображения профилей для агентов, кредиторов, компаний, офисов и групп должны иметь размеры 512 пикселей в ширину и 512 пикселей в высоту, и вы должны изменить размер и/или обрезать изображение до квадратного формата, чтобы оно выглядело наилучшим образом.

Если вы загрузите изображение размером более 512×512, kvCORE автоматически уменьшит размер изображения до требуемого размера. Это также размер, необходимый для изображений профиля при использовании веб-сайта WordPress.

Целевые страницы

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

Рекомендуемые размеры: 1000 пикселей в ширину и 758 пикселей в высоту.

Виджет изображения

При создании электронного письма с помощью расширенного редактора электронной почты мы рекомендуем использовать изображение шириной 500 пикселей.

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

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

Виджет значков

При использовании этого виджета для добавления значка виджет спросит, какого размера должен отображаться файл изображения. Просто выберите наиболее привлекательный вариант в раскрывающемся списке «Размер значка».

Объявления вручную

При добавлении объявления вручную есть возможность загрузить изображения недвижимости.

Рекомендуемые размеры: 1440 пикселей в ширину и 1080 пикселей в высоту. Максимальный размер файла изображения составляет 5 МБ.

Измененные/расширенные списки

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

Рекомендуемые размеры для добавления новых изображений в одно из ваших объявлений: 1440 пикселей в ширину и 1080 пикселей в высоту.

Загрузка изображений MLS

При добавлении новых объявлений в MLS, зная, что они будут передаваться на ваш веб-сайт kvCORE, мы рекомендуем загружать изображения размером не менее 1440 пикселей в ширину и 1080 пикселей в высоту.

Соответствие этим минимальным размерам гарантирует, что фотографии объявления будут правильно отображаться на вашем веб-сайте на странице сведений о объявлении.

Если изображение из MLS не соответствует этим размерам, kvCORE автоматически изменит размер изображения, чтобы оно поместилось в окне отображения на странице сведений о листинге.

Если у вас возникли проблемы с изменением размера изображений или их загрузкой, обратитесь в службу поддержки через синий чат справа или по электронной почте [email protected]!

(Ключевые слова: web & idx, размер фото, размер изображения)

css размер фонового изображения | Фрагменты кода

Главная  »  Фрагменты кода   »   css background image size

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

Рассмотрим случай изменения размера фонового изображения в теле (во весь экран) и внутри контейнера.

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

Установка размера фона в полноэкранном окне.

Мы сделаем тело на 100%, чтобы можно было использовать изображение. Вот как выглядит базовый HTML:

 

<голова>
<тело>
 

Часть стиля будет иметь только HTML и основной текст, а также фоновое изображение с центральным положением и без повторений:

HTML, тело {
высота: 100%;
маржа: 0;
заполнение: 0;
}
тело{
фон: url(earhy-lady.jpg) центр без повторов;
} 

Это просто выведет изображение в теле. Не очень убедительно, верно?

Пример редактирования

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

 /* Изображение будет увеличено до полной ширины */
тело{
размер фона: обложка;
}
 

Редактировать пример

Мы можем подогнать его под высоту, изменив код следующим образом:

 /* Это изменит размер изображения до полной высоты */
тело{
размер фона: содержит;
} 

Пример редактирования

Использование полноразмерных или полноразмерных изображений не является идеальным. Это идеально подходит для фоновых изображений, где можно обрезать изображение в некоторых точках.

Мы можем установить свойство background-position в то место, где мы хотим установить фокус при изменении размера области просмотра.

Фиксированное фоновое изображение и размер в процентах:

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

Мы просто попробуем управлять шириной фона, чтобы продемонстрировать, как это работает. Это нарушит соотношение сторон.

 /* Это изменит размер изображения на 400 пикселей по оси x и на 200 пикселей по оси y */
тело{
размер фона: 400 пикселей 200 пикселей;
} 

Пример редактирования

Это можно сделать как по оси X, так и по оси Y.

 /* Это изменит размер изображения на 400 пикселей по оси Y и на 200 пикселей по оси X */
тело{
размер фона: 200 пикселей 400 пикселей;
} 

Пример редактирования

Что, если мы хотим изменить размер фонового изображения внутри контейнера?

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

Основное правило изменения размера изображения выглядит так:

 /* Настройка базовой сетки */
.logo-контейнер{
дисплей: сетка;
сетка-столбец-шаблон: 1fr 1fr;
зазор сетки: 10px;
}
.лого{
размер фона: авто 70%;
} 

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

Пример редактирования

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

 .лого{
размер фона: 70% авто;
} 

Это приведет к выводу ниже.

Пример редактирования

Фото Саджада Нори, Омида Армина на Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE

Подойдут ли эти размеры для адаптивных макетов?

ответ зависит.