Background-size: масштабирование фонового рисунка

Содержание:

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

background-size: ширина высота;

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

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

background-size: 500px 200px;

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

можно так:

background-size: 200px;

а можно вот так:

background-size: 200px auto;

Пример:

<html>
<head>
<style>
body
{
 background:url(картинка.jpg);
 background-size:500px 200px;
 background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>текст сайта</p>
</body>
</html>

Формат PNG-24

Css свойство background

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

Особенности

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

Область применения

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

Размеры изображения и CSS

Css background — color, image, position и другие свойства для работы с фоном

В HTML5 приемлемы оба вышеприведенных способа задания размеров изображения.
Однако, вместо того чтобы использовать атрибуты width и height элемента <img>, как указано выше, целесообрзнее установить размер с помощью CSS. Это может дать вам дополнительную гибкость при отображениии картинки на странице.

Если изображение не помещается внутри области содержимого при просмотре на устройстве с небольшим экраном (например, мобильный телефон), пользователю приходится прокручивать страницу по горизонтали или уменьшать масштаб, чтобы увидеть картинку полностью, при этом, он испытывает большие неудобства.
В таких случаях предпочтительнее указать в атрибуте style значения max-width или max-height вместо абсолютных размеров.
В следующем примере мы используем max-width:100% для того, чтобы изображение не было слишком большим для своего контекста. При использовании только max-width (без использования max-height), браузер будет масштабировать изображение пропорционально. Другими словами, высота будет масштабируется вместе с шириной, а изображение не будет искажаться.

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

Тень от изображения.

Background

Чтобы создать эффект тени, используется свойство box-shadow.

Первое значение — это сдвиг тени по оси X.

Второе значение – это сдвиг тени по оси Y.

Третье значение – размытие тени. Если этот параметр не указывается, то по умолчанию тень не будет размытой.

Четвёртое значение – растяжение тени. По умолчанию тень того же размера, что и элемент.

Пятое значение – цвет тени. Цвет тени можно задать как в RGB-формате так и в RGBA-формате. По умолчанию цвет чёрный.

img {width: 300px;height: 150px;border: 1px solid #000;border-radius: 10px;box-shadow:5px 5px 10px #2B1015;
}

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

Для наглядности в index.html добавьте текст.

<!DOCTYPE html><html> <head> <meta charset=»utf-8″> <link rel= «stylesheet» type= «text/css» href= «style.css» /> <title>Изображения</title> </head> <body> <img src=»images/img1.jpg»> <p>Это текст, который обтекает изображение справа.</p> <p>Для наглядности напишем несколько абзацев</p> <p>Абзац первый</p> <p>Абзац второй</p> <p>Абзац третий</p> <p>А этот абзац обтекает изображение уже снизу.</p> </body> </html>

Если мы хотим, чтобы изображение располагалось слева, а текст обтекал его справа, используем свойство float , значением которого будет left.

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

img {width: 300px;height: 150px;border: 1px solid #000;border-radius: 10px;box-shadow:5px 5px 10px #2B1015;float: left;margin-right: 20px;
}

Подготовим простой шаблон HTML-страницы для вставки в неё графики

Для наглядности сначала создадим каркас HTML-страницы с неким текстом , а затем вставим в неё картинку, после чего уже разберём все параметры и настройки, которые, в основном, используются и могут быть полезны:

Код 1. Базовый каркас HTML-страницы

Информацию далее рассмотрим в виде урока, чтобы поочерёдно раскрыть тему детальнее…

Перед началом выполните следующие подготовительные шаги:

Создайте, например, на рабочем столе, любую папку, в которой будем работать… Назовём её (скачать готовый результат со всеми исходниками можно ).
В подготовленной папке создайте файл (справка начинающим ), в который поместите предоставленный в блоке HTML-каркас — это будет наша очень простая web-страница, в текст которой будем вставлять картинки и производить с ними различные настройки.
Для наглядности, чтобы страница имела небольшой логотип, поместите в эту папку файл с названием (например, этот) (его подгрузка на страницу уже прописана в предоставленном коде).

Итого, мы имеем папку и в ней 2 файла:

Рис. 1. Рабочая папка с файлами

Увеличение изображения через ссылку

Увеличение изображения через ссылку — самый простой способ без применения каких-либо CSS. Просто ставим ссылку на изображение с большим размером.

Пояснение к примеру:

rel=»nofollow» — для того, чтобы ссылка не передавала вес изображению ;
target=»_blank» — изображение откроется в новой вкладке.

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

Пример работы:

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

Атрибут «src».

Собственно, по-настоящему обязательный атрибут у тега <img> только один — это атрибут src. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. В основном на сайтах используется графика файловых форматов: JPEG, GIF, PNG, BMP и SVG.

Если изображение находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

Пример HTML:

Попробуй сам

Если изображение находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя файла с изображением, например:

Если изображение находится не на том сервере, на котором находится содержащий его HTML-документ, необходимо указать полный адрес файла с изображением, например:

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

Как уменьшить размер изображения в Photoshop

1. Открываем файл в редакторе, в верхней панели выбираем вкладку Image (Изображение) – Image Size (Размер изображения).

2. В открывшемся окне можно менять параметры ширины (Width), высоты (Height) и разрешения (Resolution). Причем, для сохранения пропорций должен быть отмечен флажок Сохранять пропорции (Constrain Proportions), в этом случае при изменении одного из параметров, другие меняются автоматически. Для публикаций графики в вебе разрешение составляет 72пк/дюйм.

Вводим необходимые параметры и жмем «ОК».

3. Сохраняем изображение.Для сохранения изображения есть три варианта:

Сохранить (Save (Ctrl+S));
Сохранить как (Save As (Shift+Crtl+S));
Сохранить для веб ( Save for Web (Shift+Ctrl+Alt+S)).

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

При выборе Сохранения для Веб в открывшемся окне можно задать параметры:

Формат ( как говорили выше, jpeg);
Качество (Quality) – этот параметр изменяется от 0 до 100, соответственно при этом итоговое изображение будет лучшего или худшего качества. В окне слева от параметров на вкладках вы можете выбрать варианты отображения: Оригинал, Оптимизированное, 2 варианта (одновременно отображается сохраняемое и итоговое изображение), 4 Варианта (отображаются оригинальное изображение, изображение с параметрами, которое вы задали, и 2 промежуточных).Я обычно выбираю 2 Варианта (2-Up) — меняя качество можно одновременно видеть изменения в изображении и подобрать оптимальное для конкретного случая. Для статьи меня устроило качество 50, но это не постоянная величина, чаще я сохраняю изображения в пределах 60-75. Снизу под отображаемыми вариантами выводятся данные итогового изображения в зависимости от заданных настроек;
Отмечаем галочку Прогрессивный (Progressive). Итоговое изображение будет загружаться не построчно, а за несколько подходов. Вам наверняка приходилось сталкиваться с такими случаями, когда вы видите не половину загруженной картинки, а сначала — полностью — плохого качества, потом — все лучше и лучше. Но с самого начала загрузки пользователь имеет представление о том, что на изображении. Вес прогрессивного может быть на несколько килобайт больше оптимизированного, но эта разница незначительна. Практика показывает, что прогрессивный джипег позитивнее воспринимается пользователями.
Размеры. Если вы хотите изменить размеры изображения, они задаются в этом же окне снизу.

После выбора необходимых настроек жмем «Сохранить» (Save) и получаем оптимизированную для сайта картинку.

Анализируем результаты оптимизации изображения в Фотошопе:

исходное изображение все то же 2184*1456 пк, 735 Кб, после уменьшения до 750*500 пк: при обычном сохранении 159 Кб — вес больше, чем при уменьшении в Paint, Сохранение для Веб (при качестве 50) — 63,7 Кб. Сжатое изображение весит 11.5 раз меньше. Не забываем, что ко всем прочим плюсам джипег еще и прогрессивный.

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

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

Способ 1. Как изменить размер изображения в Microsoft Paint

Найдите и запустите MS Paint
. Он предустановлен на всех версиях операционной системы Windows. Пуск> Все программы> Стандартные> Paint
:

Перетяните изображение в окно Paint
или используйте Меню> Открыть (Ctrl + O)
.
В главном меню программы найдите пункт «Изменить размер
» и выберите его:

Откроется панель изменения размеров и пропорций изображения. Значение вы можете указать в пикселях. Не забудьте установить флажок «Сохранять пропорции
». Иначе изображение будет деформировано:

Чтобы увеличить размер картинки, нажмите кнопку «ОК
» и сохраните фотографию.

Советы:

Если не получается задать нужные размеры фотографии, не растягивая ее, вы можете использовать инструмент «Обрезка
», чтобы удалить ненужные края. Как это сделать, описано в пункте 3
;
Чтобы быстрее открыть фотографию, кликните по ней правой кнопкой мыши и выберите из контекстного меню пункт «Открыть с помощью Paint
»;
Лучше всего сохранять изображение в том же формате, что и оригинал.

Способ 2. Как изменить размер изображения в MS Photo Gallery

Если Microsoft Photo Gallery
не установлена на вашем компьютере (Пуск> Фотогалерея
), вам необходимо скачать и установить его как часть Windows Essentials 2012
;
Запустите MS Photo Gallery
и найдите свой графический файл;
Кликните по нему правой кнопкой мыши и выберите пункт «Изменить размер
…»:

Выберите готовый пресет: «Малый 640 пикселей
», «Средний 1024
», «Большой 1280
» и т.д.

Нажмите «Изменить размер и сохранить
». После того, как увеличите размер картинки, изображение будет размещено в той же папке, в ней также останется оригинал.

Советы:

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

Способ 3. Как изменить размер изображения в Photoscape

Можно увеличить размер картинки в Фотошопе. Или использовать для этого Photoscape
.

Загрузите
Photoscape и установите его. Запустите программу;
Перейдите на вкладку «Редактор
» и найдите фотографию, которую хотите изменить:

В нижней части изображения находится кнопка «Изменить размер
», нажмите на нее.
Задайте новый размер фотографий. Убедитесь, что опция «Сохранять соотношение сторон
» включена и нажмите кнопку «OK
»:

Сохраните отредактированное изображение.

Советы:

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

Способ 4. Как изменить размер изображения в IrfanView

Установите IrfanView
— отличный инструмент для просмотра и увеличения размера картинки;
Добавьте фотографию, перетянув ее в окно программы, или нажав первую кнопку в панели инструментов:

Перейдите на вкладку «Изображение
», выберите «Изменить размер /пропорции
» (Ctrl + R

);
Установите новый размер в пикселях, сантиметрах, дюймах, или в процентах от исходного изображения:

Сохраните изображение.

Советы:

Вы можете использовать стандартные размеры: 640 на 480 пикселей, 800 на 600 пикселей, 1024 на 768 пикселей и т.д.;
Чтобы сохранить высокое качество фотографий, убедитесь, что для параметра DPI
задано значение не менее 300.

Способ 5. Как изменить размер изображения онлайн

Чтобы увеличить размер картинки онлайн, перейдите на сайт PicResize
.
Нажмите кнопку «Browse

», чтобы выбрать фотографию. Нажмите «Continue

»:

Выберите процент от исходного изображения, например на 50% меньше. Инструмент отобразит размер изображения на выходе. В качестве альтернативы можно ввести точный размер, выбрав в выпадающем меню пункт «Custom Size

»:

Изображения — составляющие практически любого сайта, поэтому без изменения размера не обойтись. Изменять размер картинки можно
2 способами: в графическом редакторе или программно в коде html на css
.

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

Изменение картинки в коде css на сайте

Плюсы:

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

Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите,
чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить
хорошее качество при уменьшении.

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

Минусы:

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

Как изменить размер картинки в html с помощью css

Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота)
внутри атрибута style. Вы можете
написать только width или height
, и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки. Например, указав только ширину
изображения с помощью width, его высота(height) изменится автоматически, сохранив пропорции. И наоборот, при указании только высоты(height), его ширина
также автоматически поменяется, сохранив пропорции картинки.

Результат в браузере

Код страницы

Тестовая страница

Пример кода с изменением размеров изображения в.css

Результат в браузере

Код страницы

Тестовая страница

style=»width:150px; » >

В обоих примерах, показанных выше использована одна и та же картинка с размером 300x184px(ширина и высота).
В 1 примере картинка отобразилась в браузере без изменений с оригинальным размером 300x184px т. к. в css не указывались ширина и высота.
А во 2 примере картинка отобразилась в браузере уменьшенная в 2 раза т. к. была указана ширина 150px, высота соответственно
автоматически изменилась до 92 px. Как вы видите, свойство height, можно не указывать вообще т. к. оно автоматически изменяется пропорционально width.

Если вы укажете оба параметра: width(ширина), height(высота)
и они не будут соответствовать пропорциям, то
картинка будет иметь именно такой размер,
но в сжатом или растянутом виде, в зависимости от значений.

Выравнивание изображений

По левому краю: необходимо использовать какой-то класс, в котором будет задано свойство float:left. Как правило, необходим еще отступ справа с помощью свойства :

Выравнивание изображения слева

.leftalign {
float: left;
margin-right: 15px;
}

1
2
3
4

.leftalign{

floatleft;

margin-right15px;

}

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

Выравнивание изображения справа

.rightalign {
float: right;
margin-left: 15px;
}

1
2
3
4

.rightalign{

floatright;

margin-left15px;

}

По центру можно выравнять изображение двумя способами: превратив img в блочный элемент с margin: auto или поместить изображение в блочный элемент (div, p, header), для которого задать свойство text-align: center:

выравнивание изображения по центру

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>

.centeralign {

displayblock;

marginauto;

}

header {

text-aligncenter;

}
</style>

в новой вкладке
Просмотров:
474

Способ 1. Как изменить размер изображения в Microsoft Paint

Найдите и запустите MS Paint
. Он предустановлен на всех версиях операционной системы Windows. Пуск> Все программы> Стандартные> Paint
:

Перетяните изображение в окно Paint
или используйте Меню> Открыть (Ctrl + O)
.
В главном меню программы найдите пункт «Изменить размер
» и выберите его:

Откроется панель изменения размеров и пропорций изображения. Значение вы можете указать в пикселях. Не забудьте установить флажок «Сохранять пропорции
». Иначе изображение будет деформировано:

Чтобы увеличить размер картинки, нажмите кнопку «ОК
» и сохраните фотографию.

Советы:

Если не получается задать нужные размеры фотографии, не растягивая ее, вы можете использовать инструмент «Обрезка
», чтобы удалить ненужные края. Как это сделать, описано в пункте 3
;
Чтобы быстрее открыть фотографию, кликните по ней правой кнопкой мыши и выберите из контекстного меню пункт «Открыть с помощью Paint
»;
Лучше всего сохранять изображение в том же формате, что и оригинал.

Способ 2. Как изменить размер изображения в MS Photo Gallery

Если Microsoft Photo Gallery
не установлена на вашем компьютере (Пуск> Фотогалерея
), вам необходимо скачать и установить его как часть Windows Essentials 2012
;
Запустите MS Photo Gallery
и найдите свой графический файл;
Кликните по нему правой кнопкой мыши и выберите пункт «Изменить размер
…»:

Выберите готовый пресет: «Малый 640 пикселей
», «Средний 1024
», «Большой 1280
» и т.д.

Нажмите «Изменить размер и сохранить
». После того, как увеличите размер картинки, изображение будет размещено в той же папке, в ней также останется оригинал.

Советы:

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

Способ 3. Как изменить размер изображения в Photoscape

Можно увеличить размер картинки в Фотошопе. Или использовать для этого Photoscape
.

Загрузите
Photoscape и установите его. Запустите программу;
Перейдите на вкладку «Редактор
» и найдите фотографию, которую хотите изменить:

В нижней части изображения находится кнопка «Изменить размер
», нажмите на нее.
Задайте новый размер фотографий. Убедитесь, что опция «Сохранять соотношение сторон
» включена и нажмите кнопку «OK
»:

Сохраните отредактированное изображение.

Советы:

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

Способ 4. Как изменить размер изображения в IrfanView

Установите IrfanView
— отличный инструмент для просмотра и увеличения размера картинки;
Добавьте фотографию, перетянув ее в окно программы, или нажав первую кнопку в панели инструментов:

Перейдите на вкладку «Изображение
», выберите «Изменить размер /пропорции
» (Ctrl + R

);
Установите новый размер в пикселях, сантиметрах, дюймах, или в процентах от исходного изображения:

Сохраните изображение.

Советы:

Вы можете использовать стандартные размеры: 640 на 480 пикселей, 800 на 600 пикселей, 1024 на 768 пикселей и т.д.;
Чтобы сохранить высокое качество фотографий, убедитесь, что для параметра DPI
задано значение не менее 300.

Способ 5. Как изменить размер изображения онлайн

Чтобы увеличить размер картинки онлайн, перейдите на сайт PicResize
.
Нажмите кнопку «Browse

», чтобы выбрать фотографию. Нажмите «Continue

»:

Выберите процент от исходного изображения, например на 50% меньше. Инструмент отобразит размер изображения на выходе. В качестве альтернативы можно ввести точный размер, выбрав в выпадающем меню пункт «Custom Size

»:

Прежде, чем ответить на вопрос «как вставить картинку в HTML?
», следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG
, GIF
и JPEG
, а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop
, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.