Css background image масштабирование: css — Правильное масштабирование фона

Как уменьшить background image в css

Свойство 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 :

Пример . Значение cover

Посмотрите на работу значения cover :

Пример . Улучшим работу cover

Работу значения cover можно улучшить, если отцентрировать картинку с помощью свойства background-position (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):

В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):

Пример . Значения в пикселях и процентах

В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):

Пример . Значение auto для одной из сторон + проценты

В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так — картинка будут оставаться неискаженной):

Пример .

Значение auto для одной из сторон + пиксели

В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:

Пример . Значение 100% для обеих сторон

Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100% , можно было просто написать background-size: 100% — одно значение):

Пример . Значение contain

Сейчас картинка будет занимать всю ширину или всю высоту с сохранением пропорций. Поуменьшайте окно браузера, чтобы увидеть, что картинка в различных состояниях будет занимать или всю ширину или всю высоту:

Пример . Значение cover

Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:

Сравните с тем, как будет выглядеть картинка по умолчанию (при значении auto). Поуменьшайте окно браузера, чтобы увидеть отличия:

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

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

Абсолютное изменение размера

Могут применяться единицы измерения.

По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.

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

Масштабирование до максимального размера

Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:

Заполнение фоном

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

Масштабирование нескольких фонов

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

Работа в браузерах

Последние версии всех браузеров поддерживают background-size без префиксов.

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

Как растянуть и масштабировать фоновое изображение с помощью CSS

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

Однако часть изображения может быть не видна (обрезана по вертикали или горизонтали), если ширина или высота измененного фонового изображения слишком велика для элемента.

Давайте посмотрим следующий пример, чтобы понять, как работает это свойство:

Если оно работает не так, как нужно для вас, вы можете попробовать другие значения: background-size: contain; , background-size: 100%; , background-size: 100vw 100vh; и т. д.

Читайте также

Похожие примеры:

Похожие посты

18 декабря, 2019

• 15 декабря, 2019
• 3-4 мин.
• 43

Как определить или создать таблицу стилей только для Internet Explorer

13 декабря, 2019

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Разработка сайтов для бизнеса

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

Как сделать изображения пропорционально масштабируемыми и автоматически обрезать подсказки CSS

Как сделать изображения пропорционально масштабируемыми и автоматически обрезать подсказки CSS

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

источник

Когда адаптивный веб-сайт или мобильная страница находятся в макете CSS DIV для списка изображений или макета изображения,
Если вы хотите, чтобы изображение масштабировалось,
Самое простое — установить ширину img на 100%.
Если вы не установите высоту, высота автоматически масштабируется вместе с высотой

Однако, если достигается эффект, заключающийся в том, что ширина и высота изображения должны отображаться в определенном соотношении, например 1: 1, 4: 3 и т. Д., 
Однако размер изображения не соответствует этому соотношению, и я не хочу, чтобы изображение растягивалось и деформировалось, а дополнительные части с обеих сторон автоматически обрезаются.

---

Прежде всего, сегодня я подготовил четыре материала различной ширины и высоты, как показано ниже:

---

Сначала покажите окончательный эффект:
(обратите внимание, что обрезка здесь основана на середине, а обрезка — это верх и низ или левая и правая стороны)

(Ширина и высота 1: 1):

(Ширина и высота 4: 3):

(Ширина и высота 3: 4):

---

Реализуйте стиль

HTML часть:

<div></div>

•  

часть css:

. zoomImage{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}

---

Анатомия принципа

width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;

Основная цель вышеупомянутых четырех предложений в стиле состоит в том, чтобы сделать этот div размером 1: 1.
Несмотря на то, что height: 0; height равно 0, его значение заполнения равно 100%.
Это связано с тем, что при заполнении в процентах оно рассчитывается на основе ширины его родительского слоя.

 
в одной точкеДокументация MDN по заполнениюЯ также упомянул, что заинтересованные студенты могут посмотреть.

background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;

Следующие 5 предложений используют css3background-size:coverХарактеристики фонового изображения расширяются, чтобы быть достаточно большими, чтобы фоновое изображение полностью покрывало фоновую область.

---

Для заполнения в процентах я нарисовал картинку, надеясь помочь всем понять:

Резюме: соотношение вам нужно, отношение ширины к отступу 
При использовании просто используйте .zoomImage в качестве тега img.

---

О распространении на отзывчивую карусель:

Здесь я беруПлагин Swiper КарусельНапример:
Этот плагин в настоящее время широко используется на мобильных веб-страницах с сенсорным контентом, скользящим плагином js, balabala …

Этот плагин реагирует правильно,
Но есть две проблемы:
1. В этой карусели вы должны указать ему высоту, но высота не фиксирована, она должна быть пропорциональной.
(кроме использования js или медиазапроса для каждого разрешения для установки высоты / это не слишком утомительно)
Таким образом, мы также можем использовать метод padding выше, чтобы сделать его контейнером, который можно масштабировать.
2. Что делать, если изображение в карусели не соответствует требуемому соотношению (снова возвращаясь к этому вопросу, теперь я знаю, как это сделать)

До оптимизации:

После оптимизации:

Его можно превратить в один: вам не нужно адаптировать карусель в соответствии с размером картинки.

---

О совместимости:

Этот стиль имеет свойства, которые используют CSS3:background-size:cover; 
Затем, когда мы делаем отзывчивые мобильные страницы, мы также должны использовать медиазапросы CSS3 или другие стили CSS3, и мобильные браузеры лучше поддерживают CSS3, Так что не стоит об этом беспокоиться.

---

Интеллектуальная рекомендация

HTML5 макет и HTML5 теги

Перейти к:https://blog.csdn.net/qq15577969/article/details/79911137 1. Новая декларация типа документа (DTD) Декларация типа документа HTML 5 DTD-оператор:     <!doctype html> &lt…

Топ 10 вопросов C Вопросы

C Принимая ряд вопросов Тема Описание: Идея решения: Построение значения элемента — это новый массив подписчиков массива, а элементы имеют количество раз, а затем пересекают каждое значение Value [I] …

Гусеничный поиск комиксов Python dmzj (3)

В прошлый раз мы говорили оdmzj поиск комиксов (2)Сразу после предыдущего кода мы продолжаем углубленный анализ сканирования, чтобы завершить сканирование комиксов. Сканирование изображения Прежде все…

Управляйте HDFS, используя плагин Eclipse

Шаг 1: Скопируйте плагин Hadoop-Eclipse-Plugin-2.5.1.jar к каталогу плагинов. Шаг 2: Добавить местоположение После нажатия на финише вы можете увидеть добавление успеха. (0) На самом деле, корневой ка…

NET подключается к базе данных MySQL Crud

Построить окружающую среду Создание среды подробные шаги (гиперссылки) Информация базы данных ADD DELETE UPDATE SELECT…

Вам также может понравиться

Тодолистская китайская версия (программное обеспечение для управления задачами) v7.1.5.0

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

Анализ структуры файлов Java байт-кода

Анализ структуры файлов Java байт-кода 1. Причины создания файлов байт-кода Структура файла класса 2.1, магическое число и версия файла класса 2. 2 Постоянный пул 2.3 Знак доступа 2.4, индекс класса, р…

AJAX и XML взаимодействие

Правая страница Страница данных XML PHP обработка страницы Процесс:…

Объект в JS используется в качестве передачи параметров для изменения самого

Сначала установите параметры всех функций в Ecmascript в одном предложении в основных моментах JS.     Что называется значением? ? ? Может быть легко понятно, что генерировать новую переменн…

Ассортимент JSON Array и преобразование типа объекта

         // Тип даты поворота персонажа  …

Увеличьте фон, пожалуйста! – A List Apart

В рекламном мире, стремящемся использовать каждый дюйм среды для взаимодействия с брендом или продуктом, становится все более популярным создавать веб-сайты с полноэкранным фоном браузера. С помощью CSS этого можно добиться довольно легко. Просто поместите огромное фоновое изображение на страницу с одной строкой кода (переносы строк отмечены » — ред. ):

Статья продолжается ниже

 body {
  фон: URL #000(myBackground_1280x960.  jpg) »
центральный фиксированный без повтора;
} 

В первом примере показано центрированное фоновое изображение размером 1280 на 960 пикселей, которое фиксируется в области просмотра (оно не прокручивается вместе с документом).

Но какой размер изображения будет достаточно большим? Мониторы и операционные системы быстро развивались, и в результате существует широкий диапазон доступных разрешений экрана. Самые популярные разрешения сегодня — 1024x768px, 1280x800px, 1280x1024px и 1440x900px. Однако с появлением HD-экранов (1920x1080px) и профессиональные дисплеи, поддерживающие разрешение до 2560x1600px, почти все возможно.

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

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

Существует несколько обходных путей, однако все они основаны на элементе HTML img (вместо фона CSS). Они также используют абсолютное позиционирование для слоев и таблиц или сценариев для изменения размера. Кроме того, не все эти методы сохраняют пропорции изображения, что приводит к нереалистично растянутому фону.

Фоны CSS3 в помощь#section2

Уровень 3 модуля фона и границ CSS W3C (в настоящее время рабочий проект) определяет свойство background-size , которое соответствует нашим требованиям. Интересные значения (со ссылкой на спецификации W3C):

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

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

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

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

background-position свойство. В третьем примере мы снова расширили первый пример, на этот раз установив для свойства background-size значение cover .

Вы включаете масштабирование фона, добавляя следующие объявления в таблицу стилей:

 body {
  фон: #000 url(myBackground_1280x960.jpg) »
центральный фиксированный без повтора;
  -moz-background-size: обложка;
  размер фона: обложка;
}
 

Свойство background-size уже поддерживается Firefox 3. 6 (используя - префикс moz ; Firefox 4 будет использовать обычное свойство CSS3), Chrome 5, Safari 5 и Opera 10.54; и он будет включен в Internet Explorer 9 (он уже доступен в Preview 3). Старые версии Webkit и Opera уже поддерживают свойство

background-size , однако эти реализации основаны на предыдущем черновике, который не включал ключевые слова contains и cover .

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

Добавление мультимедийных запросов CSS3 в раздел mix#section3

Модуль W3C CSS3 Media Queries (кандидатная рекомендация) определяет условные правила, которые применяются только в определенных диапазонах ширины или высоты. Это позволяет нам реализовать масштабирование фона от минимальной ширины и высоты и далее. Медиа-запросы поддерживаются Firefox 3.5, Chrome, Safari 3 и Opera 7, а также будут включены в Internet Explorer 9.

Добавляя следующие правила стиля, мы сообщаем браузеру, что не хотим, чтобы фоновое изображение масштабировалось. меньше 1024×768 пикселей:

 тело {
  фон: #000 url(myBackground_1280x960.jpg) »
центральный фиксированный без повтора;
  -moz-background-size: обложка;
  размер фона: обложка;
} @media только все и (максимальная ширина: 1024 пикселей) и (максимальная высота: 768 пикселей) {
  тело {
    -moz-background-size: 1024px 768px;
    размер фона: 1024px 768px;
  }
}
 

Обратите внимание, что 1024x768px имеет то же соотношение, что и фоновое изображение (1280x960px). При использовании другого соотношения вы получите внезапные скачки масштабирования при изменении размера окна браузера.

В наших последних примерах, четвертом и пятом, мы добавили правило @media , чтобы наше фоновое изображение не масштабировалось меньше, чем 1024 на 768 пикселей.

В пятом примере показано, что, установив для свойства background-position значение left-bottom вместо center-center , мы можем управлять тем, как фоновое изображение выравнивается в области просмотра.

Возвращаясь к старым технологиям#section4

Это захватывающее время для веб-разработчиков, когда все производители браузеров усердно работают над внедрением новых технологий, таких как HTML5 и CSS3. В результате пришло время начать пересматривать старые методы, чтобы увидеть, как те же самые вещи можно делать более умными и чистыми способами. Хотя циклы обновления Firefox, Chrome, Safari и Opera относительно короткие, будет интересно посмотреть, как быстро люди перейдут на Internet Explorer 9., так что вскоре мы сможем начать широкомасштабное использование многих из этих новых методов.

Масштабирование фонового изображения CSS | Фрагмент кода

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

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

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