CSS и HTML: cвойства изображений
img – одиночный тег. У него 2 обязательных атрибута: src типа путь к файлу и alt типа текст.
Распространенные форматы изображений: jpeg, png (не имеет стандартной иконки), svg, webp: 
Изображения бывают растровые и векторные. Растровые состоят из квадратных пикселей. Векорные – из кривых и других графических примитивов, правил их построения в изображение. svg – векторный формат.
Изображение в HTML – по умолчанию строчный блок (display: inline-block;). Это значит, что картинка в тексте воспринимается браузером как элемент текста.
Свойства изображений
Размеры, ширина, высота – width, height
- ширина, width: 100px;
- минимальная ширина, min-width: 100px;
- максимальная ширина, max-width: 100px;
- высота, height: 100px;
- минимальная высота, min-height: 100px;
- касимальная высота, max-height: 100px;
Отступы, поля – margin и padding
Поля страницы можно инспектировать в браузере по нажатию F12, вкладка Elements
- margin: 0; (внешнее поле, маргиналии)
- padding: 20px; (внутренний отступ)
Рамка – border
- рамка, обобщенное правило. border: 2px dashed blue;
- радиус скругления рамки. border-radius: 5px;
- Скруглить квадрат до круга – border-radius: 50%; Пример: аватарка
Картинка на фоне – background
- background-image устанавливает картинку на фоне по ее url-адресу
- background-position (top center, right top и т.д.)
- background-size (cover, значения 200px 200px)
- background-repeat (значения: repeat-x no-repeat repeat-y)
- background-attachment Поведение фона при скроллинге (значения: scroll, fixed, local)
- background-origin Опредеяет, где отрисовывать фон (значения: border-box, padding-box, content-box, inherit)
- background-clip (значения: border-box по умолчанию, padding-box, content-box, inherit) Примеры.
- background-color (цвет фона)
- background: white url(«image.jpg») no-repeat 50% 0; Общее свойство, описывающее фон страницы.
- background: url(/media/blog/example_image_1.jpg) center no-repeat;
Живые примеры:
Солнечная система: статистика (background-size: cover; background-position: center;)
Статистика пилотируемой космонавтики (background-repeat: no-repeat; background-position: bottom; background-color: black;)
Размер картинки в html: как им управлять?
От автора: приветствую вас. Картинки — практически один из самых важных элементов на веб-страницах. Благодаря им нам значительно проще и интереснее воспринимать то, что мы видим на экране. Но если заводить речь об их встраивании в веб-страницы, то нужно знать как минимум то, как управлять размером картинки в html. Именно об этом мы сегодня поговорим.
Способы задать размер изображениям
Будем смотреть все на очень простом примере. Вот такой есть код:
Это блок с идентификатором, внутри которого лежит картинка. Предположим, что наш блок имеет фиксированные размеры. Для наглядности зададим еще и красную рамку, чтобы четко видеть его границы:
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Итак, ширина блока — 200 пикселей, а высота — 160. И вот нам нужно, чтобы в него вписалось фото. Но величины ее, допустим, мы не знаем. Ну ладно, я могу вам сказать, что я сделал примерно 300 на 200 пикселей, в таком случае фото попросту не влезет в блок. Давайте посмотрим, что будет:
На этом скриншоте очень четко видно, что оно выходит за пределы красной рамки, то есть не вписывается в блок, в котором должно находиться внутри. Каким образом можно исправить ситуацию?
Предположим, что фото лежит на сервере и изменить непосредственно ее ширину и высоту нельзя. В таком случае один из вариантов — задать фиксированную ширину и высоту картинке с помощью атрибутов тега img: width и height.
Вот, теперь все идеально вписалось в блок, потому что теперь имеет такие же параметры, как и он сам. Но помните одну важную деталь: если вы сами прописываете и ширину и высоту, то, скорее всего, нарушаете пропорции. Чтобы не нарушать их, нужно прописать только одно значение (ширину). Тогда второе браузер посчитает сам, не нарушая пропорций.
Теперь изображение по высоте занимает не все доступное место, но зато ее пропорции не нарушены.
Собственно, такой способ задания размера (прямо в html через атрибуты) годится лишь в том случае, когда вы работаете с каким-то конкретным изображением на конкретной страницы. Если размеры необходимо определить группе картинок, намного правильнее использовать отдельной файл стилей, в котором прописывать все необходимые правила.
В css правила можно задать как отдельной картинке (выделив ее идентификатором), группе (прописав каждому изображению класс или с помощью других доступных селекторов) либо сразу всем, обратившись по селектору img.
Как сделать в css адаптивные картинки?
Для этого уже давно веб-разработчики и верстальщики используют такой достаточно простой код:
Как задать размер фото в html
Тег <img> (от англ. image — изображение) предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG, SVG, PNG, WebP.
Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> в контейнер <a> .
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Изображения и мультимедиа
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также поисковыми системами или экранными ридерами, читающими текст с экрана для слабовидящих людей.
Синтаксис
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
height¶
Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img> . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Старайтесь задавать размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остаётся неизменным. При этом качество изображения может ухудшиться.
Синтаксис
Значения
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
Исходная высота изображения.
ismap¶
Атрибут ismap говорит браузеру что рисунок является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
Отправка данных на сервер происходит следующим образом. Необходимо поместить элемент <img> в контейнер <a> , где в качестве значения атрибута href указать адрес серверной программы. Программа анализирует полученные координаты нажатия мыши, которые считаются от левого верхнего угла изображения, и возвращает требуемую веб-страницу.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
sizes¶
Задаёт размеры изображения для разных макетов страницы. Разные значения и примеры использования показаны ниже.
Одно значение ширины. Здесь vw — это ширина в процентах от области просмотра. В качестве значений можно использовать единицы em, ex, ch, rem, vw, vh, vmin, vmax, cm, mm, q, in, pc, pt, px, но не проценты.
Медиа-запрос с одним значением ширины. В данном случае в качестве контрольной точки задано 40em.
Список размеров, перечисленный через запятую. В значениях можно указывать медиа-запросы и функцию calc() .
Синтаксис
<значение размера исходника> не допускает проценты, используйте только единицы vw.
Значение по умолчанию
Адрес графического файла, который будет отображаться на веб-странице. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
srcset¶
Список из одного или нескольких значений, разделённых запятыми, указывающих набор возможных изображений для отображения в браузере. Каждая строка может состоять их следующих частей:
- адрес изображения;
- дескриптор ширины, который представляет собой целое положительное число, за которым следует w (например: 600w);
- дескриптор плотности пикселей, представляет собой положительное десятичное число, за которым сразу следует х.
Каждая строка в списке должна содержать обязательно адрес и по желанию дескриптор ширины или плотности пикселей. Если никакой дескриптор не задан, то по умолчанию он равен 1x.
Браузер выбирает наиболее подходящее изображение из списка, к примеру, учитывая плотность пикселей устройства, и отображает его.
Поддержка браузерами
Can I Use srcset? Data on support for the srcset feature across the major browsers from caniuse.com.
Полифилы для включения поддержки:
Пример
Значение по умолчанию
width¶
Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img> . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута height или width сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.
Старайтесь задавать размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.
Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остаётся неизменным. При этом качество изображения может ухудшиться.
Синтаксис
Значения
Любое целое положительное число в пикселях или процентах.
Значение по умолчанию
Исходная ширина изображения.
usemap¶
Атрибут usemap связывает между собой картинку и карту-изображение, задаваемую с помощью контейнера <map> . В качестве такой связи выступает имя идентификатора, которое указывается в значении атрибута usemap , и то же имя, заданное у атрибута name элемента <map> . При этом в <img> идентификатор должен начинаться с символа решетки ( # ).
How to set an image's width and height without stretching it?
will stretch to fill that space. I want the image to stay the same size, but for it to take up that much space in the DOM. Do I have to add an encapsulating <div> or <span> ? I hate adding markup for styling.
13 Answers 13
Yes you need an encapsulating div:
with something like:
Other solutions (padding, margin) are more tedious (in that you need to calculate the right value based on the image’s dimensions) but also don’t effectively allow the container to be smaller than the image.
Also, the above can be adapted much more easily for different layouts. For example, if you want the image at the bottom right:
2017 answer
CSS object fit works in all current browsers. It allows the img element to be larger without stretching the image.
You can add object-fit: cover; to your CSS.
Load the image as a background for a div.
All browsers will crop the part of the image that doesn’t fit.
This has several advantages over wrapping it an element whose overflow is hidden:
- No extra markup. The div simply replaces the img.
- Easily center or set the image to another offset. eg. url(pic) center top;
- Repeat the image when small enough. (Ok, I don’t know, why you would want that)
- Set a bg color in the same statement, easily apply the same image to multiple elements, and everything that applies to bg images.
Update: This answer is from before object-fit; you should now probably use object-fit/object-position.
It is still useful for older browsers, for extra properties (such as background-repeat), and for edge cases (For example, workaround Chrome bugs with flexbox and object-position and FF’s (former?) issues with grid + autoheight + object-fit. Wrapper divs in grid / flexbox often give. unintuitive results.)