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

Масштабирование картинок

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

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

Использование атрибутов

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

Пример 1. Размеры в пикселях

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

Рис. 1. Размеры фотографии

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

Пример 2. Размеры в процентах

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого отступ слева нам не нужен, поэтому его убираем через свойство margin-left . Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Масштабирование через стили

Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height . Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента .

Пример 3. Размеры через стили

figure img < width: 100%; /* Ширина в процентах */ >

Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width , то стили имеют приоритет выше.

Интерполяция

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

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

Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering . К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.

Пример 4. Изменение алгоритма интерполяции

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

Рис. 3. Вид картинок после увеличения масштаба

Вписывание картинки в область

Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).

Пример 5. Использование overflow

Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.

Рис. 4. Фотография внутри области заданных размеров

Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover , оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.

Пример 6. Использование object-fit

figure < width: 100%; /* Ширина области */ height: 400px; /* Высота области */ margin: 0; /* Обнуляем отступы */ >figure img < width: 100%; /* Ширина изображений */ height: 100%; /* Высота изображении */ object-fit: cover; /* Вписываем фотографию в область */ >

См. также

• object-fit
• Атрибуты элементов
• Выравнивание картинок
• Добавление медиа-контента
• Изображения
• Изображения
• Изображения в HTML
• Подрисуночная подпись
• Фон в CSS
• Форматы графических файлов

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

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

img  width: 100px; height: 100px; > 

Также можно указать размеры в %, что позволит установить соответствующие размеры в зависимости от размера родительского элемента.

/* родительский блок */ div  width: 200px; > 

/* ширина картинки составит 60px */ img  width: 30%; > 

background — size

Нужно чтобы фоновая картинка заняла всю площадь элемента? Вам нужно это свойство!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Светлана Коробцева ,
• Антон Капустинский

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

Создадим блок и в качестве фона зададим ему красивую панораму:

 div class="element">div>    Скопировать Скопировано Не удалось скопировать   

 .element  height: 100vh; background-color: #f1f1f1; background-image: url("landscape.jpg"); background-repeat: no-repeat;> .element  height: 100vh; background-color: #f1f1f1; background-image: url("landscape.jpg"); background-repeat: no-repeat; >    Скопировать Скопировано Не удалось скопировать   

Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.

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

Соотношение сторон ( aspect-ratio ) обычно выражается двумя целыми числами с двоеточием: width:height или x:y. Наиболее распространенные соотношения сторон для фотографий — 4:3 и 3:2, а видео, как правило, имеют соотношение сторон 16:9 или 4:3.

Два изображения с одинаковым соотношением сторон. У одного размеры 634×951 пикселей, а у другого — 200×300 пикселей. У обоих соотношение сторон 2:3.

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

• iframe, ширина которого 100% от родительской ширины, а высота должна быть пропорциональна ширине.
• подготовка контейнеров для изображений, видео и встраиваемых материалов для предотвращения дёргания и перестройки макета, по мере их загрузки
• единообразное адаптивное пространство для интерактивной визуализации данных (графиков и т.п.) или SVG-анимации
• единообразное адаптивное пространство для многоэлементных компонентов, например — карточки или календарики с датами.
• единообразное адаптивное пространство для нескольких изображений разного размера (можно использовать вместе с object-fit )

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

Определение соотношения сторон помогает устанавливать размеры медиа в адаптивном контексте. Один из инструментов в этом сегменте — css-свойство object-fit , которое позволяет указывать, как объект (например, изображение) внутри блока должен заполнить этот блок:

Значения initial и fill искажают изображение, чтобы заполнить пространство. Это приводит к тому, что изображение может оказаться становится сжатым и размытым. Не идеально.

object-fit: cover использует размер меньшей из сторон изображения, чтобы заполнить пространство, затем обрезает картинку, чтобы поместить ее в контейнер.

object-fit: contain гарантирует, что всё изображение всегда будет видимым. Это — противоположность cover , для вычисления здесь используется большая из сторон, а размеры изображения изменяются так, чтобы сохранить его внутреннее соотношение сторон и вписать его в отведенное пространство.

В случае object-fit: none изображение обрезается по центру (положение объекта по умолчанию) с естественным размером.

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

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

Старый прием: сохранение соотношения сторон с padding-top

Использование padding-top для установки соотношения сторон 1:1 для изображений предварительного просмотра публикации в карусели.

Чтобы сделать их отзывчивыми, можно использовать соотношение сторон. Это позволяет установить определенный размер соотношения и использовать остальную часть носителя на отдельной оси (высоте или ширине).

До настоящего времени широко распространенно кроссбраузерное решение для поддержания соотношения сторон в зависимости от ширины изображения, известное, как «Padding-Top Hack». Для этого решения требуется родительский контейнер и абсолютно спозиционированный дочерний контейнер. Далее требуется рассчитать соотношение сторон в процентах, чтобы установить его как верхнюю часть поля ( padding-top ). Например:

• отношение сторон 1:1 = 1 / 1 = 1 = padding-top: 100%
• отношение сторон 4:3 = 3 / 4 = 0.75 = padding-top: 75%
• отношение сторон 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
• отношение сторон 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

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

R этому html-коду подойдёт следующий CSS:

Обеспечение соотношения сторон с помощью aspect-ratio

Использование aspect-ratio для установки соотношения сторон 1:1 изображениям предварительного просмотра сообщений в карусели.

Вычисление значения padding-top не очень интуитивно понятно и требует применение позиционирования. С помощью нового css-свойства aspect-ratio отношение сторон такая же задача решается иначе.

Для html-разметки из примера выше следует заменить padding-top: 56.25% на aspect-ratio: 16 / 9 , т.е. указать реальное отношение width / height .

Использование aspect-ratio вместо padding-top намного понятнее и оставляет для свойства padding его обычное поведение.

Для свойства aspect-ratio можно установить для соотношения сторон значение auto , где «замененные элементы с внутренним соотношением сторон используют это соотношение сторон; в противном случае блок не имеет предпочтительного соотношения сторон». Если указать одновременно значения auto и , то предпочтение будет соотношению сторон, определяемому делением width на height , если только это не замещаемый элемент с внутренним соотношением сторон (в этом случае используется его собственное соотношение сторон).

Пример согласованности в сетке (grid)

Этот пример чётко работает с механизмами компоновки, такими как CSS Grid и Flexbox. Рассмотрим список с дочерними элементами, для которых требуется сохранить соотношение сторон 1:1, например сетку логотипов спонсоров:

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

Пример предотвращения сдвига макета

Еще одна замечательная особенность css-свойства aspect-ratio — оно предоставляет возможность реализовать блоки-заглушки (placeholder) для предотвращения сдвига макета (CLS — Cumulative Layout Shift) и предоставления качественных веб-показателей. В первом примере демонстрируется загрузка ресурса из API и получается сдвиг макета, когда загрузка мультимедиа завершится. Проще говоря, текст и блоки страницы скачут и перемещаются, до тех пор, пока все ресурсы загружаются.

Видео о совокупном сдвиге макета, который происходит, когда для контейнера загружаемого ресурса не установлено соотношение сторон. Это видео записано с помощью эмуляции медленного соединения — сети 3G.

Применение css-свойства aspect-ratio устанавливает контейнеру ожидаемое соотношение сторон и предотвращает сдвиг макета после загрузки мультимедиа:

Видео c предустановленным для контейнера загружаемого ресурса aspect-ratio . Это видео записано с помощью эмуляции медленного соединения — сети 3G.

Пример использования атрибутов изображения для указания соотношения сторон

Альтернативный способ установить соотношение сторон изображению — использовать его атрибуты. Если заранее известны размеры изображения, можно установить их, c помощью атрибутов width и height .

Например, если известно, что размеры изображения составляют 800px на 600px, код разметки для него будет выглядеть так: . Тогда, если у отправленного изображения будет такое же соотношение сторон, даже не обязательно с точно такими же значениями в пикселях, можно использовать значения атрибутов изображения для установки соотношения в сочетании с css-свойствами width: 100% и height: auto , чтобы изображение занимало отведенное пространство. Все вместе это будет выглядеть так:

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

Завершение

С новым CSS-свойством aspect-ratio , которое уже работает в нескольких современных браузерах, поддержка правильных соотношений сторон в контейнерах мультимедиа и макета становится проще и понятнее.

Размер изображений для сайта

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

Что такое размер картинки?

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

Геометрический размер представленного на картинке изображения составляет 500×420 px.

Общее количество пикселей изображения составляет:

Как размер картинки влияет на «вес» файла?

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

Зависимость числа пикселей от уменьшения размера

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

Как уменьшить фактический размер картинки?

Существует три способа уменьшения изображения до нужного размера посредством редактирования:

1. метод обрезки холста картинки,
2. уменьшение размера картинки с сохранением пропорций,
3. уменьшение размера картинки с нарушением пропорций.

Эти способы предполагают безвозвратную потерю данных после коррекции: исходный размер картинки до коррекции восстановить будет невозможно.

Рассмотрим перечисленные способы подробно:

Метод обрезки

Веб-дизайнеры часто прибегают к методу обрезки для подгонки и оптимизации размера изображений для сайтов. Этот нехитрый способ заключается в «обрезании» холста изображения по краям до необходимого размера:

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

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

Уменьшение с сохранением пропорций

Данный метод используется, когда необходимо уменьшить изображение с сохранением пропорций:

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

Примеры уменьшения «веса» картинки при уменьшении размера в 2 раза

Уменьшение с нарушением пропорций

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

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

Как уменьшить отображаемый размер картинки?

Существует три стандартных способа, которые не предполагают внесения изменений в файл:

1. посредством HTML-атрибутов,
2. посредством CSS-свойств,
3. посредством JS-функций.

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

Как уменьшить размер картинки в HTML?

Данный метод предполагает использование HTML-атрибутов атрибутов Width и Height тега img , устанавливающих размеры ширины и высоты изображения:

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

Как уменьшить размер с помощью CSS?

Данный метод предполагает использование следующих CSS-свойств, применяемых к тегу img :

• width ,
• height ,
• max-width ,
• max-height ,
• min-width ,
• min-height .

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

Встроенные CSS-правила

Внешние CSS-правила

Как уменьшить размер с помощью JS?

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

Часто задаваемые вопросы

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

Графический редактор Paint позволяет уменьшать картинки как методом обрезки холста, так и посредством масштабирования с сохранением пропорций или без него:

Как уменьшить размер картинки в Photoshop?

Уменьшить изображение в «фотошопе» можно как обрезкой холста, так и масштабированием.

Инструмент «Рамка»

Данный инструмент редактора Photoshop позволяет уменьшать размер холста картинки в окне редактирования:

1. выберите инструмент «Рамка» («Crop») в панели инструментов (по умолчанию клавиша C )
2. изменяте размер изображения в окне редактирования с помощью рамки

Функция «Размер холста»

Эта функция редактора Photoshop позволяет устанавливать размер холста картинки в модальном окне:

1. в верхнем меню программы выберите Изображение → Размер холста. (по умолчанию клавиши ALT + Ctrl + C ),
2. в модальном окне укажите новый размер холста,
3. укажите сторону холста для обрезки в разделе «Расположение»,
4. нажмите ОК .

Функция «Размер изображения»

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

1. в верхнем меню программы выберите Изображение → Размер изображения. (по умолчанию клавиши ALT + Ctrl + I ),
2. в модальном окне укажите новый размер изображения и метод ресамплинга,
3. нажмите ОК .

Функция «Сохранить для Web»

Уменьшить размер картинки можно при сохранении с помощью данной функции:

1. в верхнем меню программы выберите Файл → Экспортировать → Сохранить для Web (по умолчанию клавиши ALT + Ctrl + Shift + S ),
2. в модальном окне укажите новый размер изображения и метод ресамплинга,
3. нажмите Сохранить. .

Как узнать размер картинки на сайте?

Также чтобы узнать исходный и отображаемый размер картинки можно использовать инспектор кода браузера:

Какой оптимальный размер картинок для сайта?

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

Если картинка имеет размер 1000×500 px, а отображается на сайте в размере 100×50 px, то целесообразно уменьшить её до отображаемого размера (при этом количество пикселей уменьшится в 100 раз), что существенно снизит вес картинки и веб-страницы в целом.

Как уменьшить размер изображения без потери качества?

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

Метод ресамплинга выбирается при использовании функций «Сохранить для Web» и «Размер изображения».

Похожие публикации:

1. Как изменить размер placeholder css
2. Как выучить html и css с нуля самостоятельно
3. Как убрать нижний скролл css
4. Как убрать перенос текста в css