Как в хтмл вставить картинку – Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML.

Содержание

Добавляем фото в HTML документ — Как создать сайт

Добавляем фотографию на HTML-страницу

Урок №5
Добавляем фото в HTML-документ

В этом уроке, мы рассмотрим способ добавления фотографии на HTML-страницу.

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

Вам нужно скопировать эту фотографию к себе на Рабочий стол, делается это так:

  1. нажмите правой кнопкой мыши по фотографии
  2. затем по строке: Сохранить изображение как…

Сохраните фото на Рабочий стол

На Рабочем столе у вас уже есть файл index.html, теперь там есть и фотография снежного барса, файл irbis.jpg

Для того чтобы вставить фото в HTML-страницу, существует тег <img>, у этого тега есть свойство (атрибут) src=" ", значением которого выступает адрес фотографии:


<img src="адрес фотографии">

Где:
<img> — тег, который указывает что здесь будет фотография,
src=" " — свойство тега <img>, которое указывает на адрес фотографии,

адрес фотографии — значение свойства src=" ", адрес фотографии.

Так как файлы index.html и irbis.jpg находятся в одной папке, а именно на Рабочем столе, то для того чтобы указать адрес файла irbis.jpg, достаточно просто написать его имя irbis.jpg


<img src="irbis.jpg">

Вставив этот код под заголовком <h2> </h2>, наш HTML-документ будет выглядеть так:


<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Сохраните изменения в Блокноте, нажав на клавиатуре Ctrl + S или Файл > Сохранить.

Откройте файл index.html с помощью браузера, вы должны увидеть следующее.

Читать далее: Используем CSS в HTML-документе


Дата публикации поста: 7 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Как вставить картинку в HTML

Как вставить картинку в HTML

Итак, мы с вами изучили ссылки. Но знаете, не в ссылках же счастье. Счастье - в котиках. И Интернетом правят котики. А представляют собой котики в Интернете ни что иное как картинки. Об этом мощнейшем инструменте влияния на людей мы и поговорим. И я сейчас про картинки, а не про котиков (ну не расстраивайтесь вы так).

Вставка картинки в HTML-страницу документа происходит с помощью тега <img>, который используется вместе с атрибутом src. В данном атрибуте прописывается адрес изображения.

На практике это выглядит так:

<img src="image.jpg">

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

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

Создавая HTML страницу, можно самостоятельно определять высоту и ширину изображения, применяя при этом атрибуты height и width, соответственно. Приведем пример.

<img src="img/book1.jpg">

Как следует из данного кусочка кода, ширина изображения будет составлять 200 пикселей. Обратите внимание, что буквосочетание px, обозначающее эти самые пиксели, отсутствуют рядом с числом, которое идет за атрибутом. Так принято в действующем стандарте, указанное значение – это по умолчанию количество пикселей.

Добавим эту строку в код имеющейся у нас страницы:

...
<h2>Совершенный код</h2>
<img src="img/book1.jpg">
<h3>Описание</h3>
...

Результат в браузере:
Как вставить картинку в HTML

А теперь приведем второй пример, в котором ширина задана относительная и составляет 70 процентов.

<img src="logo.png">

Что касается высоты, то для ее указания проценты, как правило, не используются.

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

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

<img src="logo.png">

И в таком случае браузер, устанавливая заданные размеры, не будет обращать внимание на пропорции сторон, что может их нарушить. Разумеется, это ещё не всё о картинках, смотрите следующие уроки. Всем удачи!

loader

Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <img>. Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt:

<img src="image.jpg" alt="Альтернативный текст">

При помощи атрибута

src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

<img src="image.jpg" alt="Альтернативный текст">

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

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

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

<img src="car.jpg" alt="">

Если картинку перенести в папку img:

то путь к ней будет начинаться с названия папки, в которой она находится:

<img src="img/car.jpg" alt="">

Если файл index.html поместить в папку files:

то путь к изображению будет начинаться с конструкции ../:

<img src="../img/car.jpg" alt="">

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

<img src="../../img/car.jpg" alt="">

и т.д.

Всплывающая подсказка

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

<img src="car.jpg" alt="Альтернативный текст" title="Автомобиль">

Если навести курсор на картинку, то появится всплывающая подсказка:


Видео к уроку

Как вставить в html картинку

blogwork

Добавление изображения или фото в HTML не вызовет у вас особых хлопот благодаря этой статье, в ней мы рассмотрим не только вставку картинки в HTML. Например, еще мы научимся вставлять картинку в таблицу и многое другое. Зачем? Потому что картинки — наше все! С ними статьи выглядят лучше, подробнее, качественнее, веселее.

Тег <img> для вставки картинки

Итак, для размещения изображения на веб-странице используется тег <img>, у которого есть атрибуты src и alt. Src показывает браузеру где лежит картинка, а alt это альтернативный текст, который видит пользователь в случае если у него отключены картинки, во время загрузки или если изображение не загружается.

Для XHTML

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="текст для картинки" />

Для HTML4, HTML5

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="текст для картинки" />

Берем и недолго думая вставляем картинку в html. Результат:

Учтите, что тег <img> это строчный элемент. Значит, когда используется XHTML/строгий HTML4, его можно размещать только внутри блочного элемента (<p>, <div>)

<img src="/images/image.jpg" alt="" />

В остальных случаях (HTML4, HTML5) это не обязательно.

Параметры, применяемые к изображениям в HTML

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

width – ширина картинки
height – высота картинки

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

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" />

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

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" />

Для решения этой проблемы (например если лень высчитывать пропорции и смотреть оригинальное разрешение), можно указать один параметр по которому браузер и будет высчитывать пропорции. Кстати, не обязательно писать «20px», можно просто написать «20». Идем дальше, на очереди параметр alt.

alt – альтернативный текст (краткое описание изображения)

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

Пример HTML-кода:

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="Логотип сайта blogwork.ru" />

Результат:

title – заголовок картинки

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

Пример HTML-кода:

<img title="Вставляем заголовок для картинки" src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" />

Результат:

Следующие атрибуты это vspace, hspace и border.

vspace – этот атрибут задает отступ по вертикали между изображением и текстом вокруг (в пикселях)

hspace – этот атрибут задает отступ по горизонтали между изображением и текстом вокруг (в пикселях)

border – этот атрибут задает рамку вокруг картинки (в пикселях)

Пример HTML-кода:

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" border="10" hspace="20" vspace="5" />

Результат:

align – (right, left, middle) этот атрибут выравнивает изображение по одному из краев, либо по центру

Код:

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" align="right" />

Результат:

 

 

 

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

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" />

Вот что получится:

Сайты иногда присваивают картинкам классы в эстетических целях, чтобы все картинки имели одинаковый стиль обрамления (например, какие-нибудь красивые border). В .css файле задается общий параметр для одного класса, например, pic. Затем он указывается в HTML:

<img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" />

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

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

Размещаем изображение с чужого сайта

Можно ли вставить картинку с чужого сайта? Можно. Это называется хотлинк (hotlink). Не все вебмастера это любят и позволяют делать, потому что картинка подгружается с чужого хостинга и если мы все начнем подгружать картинки с чужого хостинга, а он будет слабым и вообще не предназначенным для этого (как специальные сайты-хостинги картинок) то будет печаль. Но Вконтакте не такой. Вот смотрите, захожу в чужие сохраненные картинки Вконтакте и вставляю в html прямо на этой странице:

Как я это сделал? Очень просто:

<img src="https://pp.vk.me/c617119/v617119771/dd85/LB_9JqlQtoU.jpg" alt="" />

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

Как вставить картинку в таблицу на веб-странице

Сделать это очень просто — достаточно поместить <img> внутри тега ячейки <td>

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" /></td>
<td><img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" /></td>
<td><img src="https://blogwork.ru/wp-content/themes/newstheme/images/blogwork.jpg" alt="" /></td>
</tr>
</tbody>
</table>

А вот результат:

Как вставить картинку, сделав ее в качестве фона html страницы

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

<body bgcolor="#000000" background="http://.../background.jpg"></body>

В качестве страховки от того что картинка не будет загружать можно оставить bgcolor.

Бонус — почему может не показывается картинка, если вы «все правильно указали»?

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

Бывает, что хостинг или движок сайта не видит разницы в регистре между html-kartinka.png и html-kartinka.PNG. А, бывает что разница есть и поэтому картинга не загружается. Еще обратите внимание на сам файл, ведь он может быть html-kartinka.jpg, а может быть и html-kartinka.jpeg. Внимательнее!

Сидишь под вечер голову ломаешь, а там все легко. И проверить просто, — достаточно заглянуть на хостинг:

картинки на хостинге

Добавление рисунка | htmlbook.ru

Для добавления изображения на веб-страницу используется тег <img>, атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

<img src="URL" alt="альтернативный текст">

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

  • Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
  • Если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
  • Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif. Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif.

Рис. 10.1. Пример размещения файлов

  • Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif.

Рис. 10.2. Пример размещения файлов

В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.

Пример 10.1. Вставка изображения в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Добавление рисунков</title>
 </head>
 <body>
  <p><img src="http://webimg.ru/themes/cloverfield/images/ref_collage.gif" 
        alt="Это абсолютный адрес размещения изображения"></p>
  <p><img src="/example/images/home.png" 
        alt="Адрес размещения изображения относительно корня сайта"></p>
  <p><img src="images/home.png" 
        alt="Адрес размещения изображения относительно текущего HTML-документа"></p>
 </body>
</html>

Как правило, в качестве формата графического файла выступает GIF и JPEG.

Как вставить картинку в HTML документ. Тег IMG и его атрибуты

Эта статья целиком посвящается тегу IMG (англ. image — изображение) и его атрибутам. Вставка картинки в HTML, атрибуты изображения в документе, обтекание текстом и многое другое.

Дополнительно я расскажу о некоторых тонкостях для успешной индексации картинок поисковиками.

Базовый синтаксис

Понятие «синтаксис» относится как к русскому языку («правильно-писание», как говаривал Винни-Пух), так  и к языкам разметки и программирования.

HTML как язык разметки требует следовать определённым правилам — синтаксису. Для картинки они такие: Тег IMG обязательно имеет атрибут SRC — в нём указан путь и название файла-картинки, которую нужно вставить в HTML документ.

<img src="gift_box.png" alt="" />

В данном случае — файл картинки — gift_box.png, и находится он в том же каталоге, что и сам HTML документ.

Атрибут width — задает ширину картинки в пикселях, атрибут height — задает высоту рисунка. Хотя они и не строго обязательны – их наличие позволить браузеру не тратить время на вычисление физических размеров картинки и он отобразит её гораздо быстрее.

Атрибут ALT – задаёт альтернативный текст для картинки. Если посетитель в браузере отключит показ картинок, он увидит прямоугольник (размерами с картинку), и в нём – этот альтернативный текст. Поэтому, в нём нужно кратко дать знать посетителю – что на картинке.

Задавать текст в атрибуте ALT – КРАЙНЕ рекомендуется к любому изображению на странице, несущий хоть какой-то смысл. А чисто декоративные картинки (виньетки), могут иметь пустой атрибут ALT.

ALT=""

Содержание атрибута ALT активно используется поисковыми системами и произносится голосовыми браузерами

Тег IMG – непарный и должен быть обязательно закрыт слешем (<IMG…/>).

Обтекание картинки текстом

Код для картинки, которую текст должен обтекать с правой стороны:

<img src="mitich.jpg" alt="" align="left" />

Атрибут ALIGN — задает выравнивание рисунка и способ обтекания текстом:

  • bottom— нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
  • left — по левому краю окна. Текст обтекает справа
  • middle — центр картинки по базовой линии текущей строки
  • right — по правому краю окна. Текст обтекает слева
  • top — верх картинки выравнивается по самому высокому элементу строки
Обтекание картинки текстомОбтекание картинки текстом, атрибут ALIGN

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

Если вам непременно хочется забежать «вперёд паровоза» – можете почитать об этом на сайте Влада Мержевича.

Распространённые ошибки

Не нужно масштабировать изображения с использованием атрибутов width и height – ни к чему хорошему это не приводит. Если вы пытаетесь увеличить маленькую картинку – сильно падает её качество и становятся видна пиксельная структура.

Ещё хуже – когда огромную (в пикселях) картинку пытаются уменьшить атрибутами width и height. «Вес» изображения в килобайтах (или мегабайтах?) – остается прежним и она очень долго может грузиться.

Все изменения физических размеров картинки проводятся в Adobe Photoshop, например. И значения width и height в HTML документе должны совпадать с её реальным размером в пикселях.

Не используйте в ALT тексте двойные кавычки и знаки препинания и не пишите слишком длинно.

Дополнительные атрибуты и индексация картинок поисковиками

Один из косвенных методов, облегчающий попадание в «картиночный» индекс поисковых систем – задание атрибута TITLE для картинки.

Атрибут TITLE – отображается вместе с картинкой, в виде всплывающей подсказки. Его и читают поисковики.

Кроме этого – ваши картинки должны быть оригинальными, а не скачанными с других HTML – страниц.

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

Метод получения HTML — кода для изображения

Иногда требуется по-быстрому получить HTML – код какой-либо картинки. Чтобы не тратить время на «набивку пальцев» на клавиатуре, я запускаю Adobe Dreamweaver (DW) и просто перетаскиваю картинку из панели «Files» в документ.

Остаётся только скопировать код в соответствующем окне DW.

Продолжение сериала о HTML

В следующей статье я буду писать о ссылках, УРЛах  и Поисковых Системах.

Особенности вставки картинки в HTML

Здравствуйте, дорогие друзья!

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

Навигация по статье:

Как вставить картинку в HTML?

За вставку картинки в HTML отвечает тег img, который имеет свои атрибуты

<img src="images/example.jpg">

<img src="images/example.jpg">

В атрибуте src мы указываем путь к изображению, причём путь может быть относительным или абсолютным.

Например, если у вас есть файл index.html, в который вы хотите вставить картинку, расположенное в папке images, находящейся в одной и той же папке с index.html, то относительный путь будет выглядеть так:

<img src="images/example.jpg">

<img src="images/example.jpg">

А абсолютный так:

<img src="http://site.ru/images/example.jpg">

<img src="http://site.ru/images/example.jpg">

Атрибут alt используются для задания альтернативного текста. Именно на него обращают внимание поисковые системы чтобы понять что изображено на картинке и определить по какому запросу нужно высвечивать эту картинку в «Поиске по картинкам».

Так же если у посетителя сайта в браузере отключен показ изображений или картинка по каким либо причинам не загрузилась то на его месте должен будет высветиться этот альтернативный текст, указанный в атрибуте «alt»

Например:

<img src="http://site.ru/images/example.jpg" alt="Вставка изображения">

<img src="http://site.ru/images/example.jpg" alt="Вставка изображения">

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

Однако это не значит, что на картинке с изображением дивана в атрибуте alt можно написать «диван» и ничего более. Это может быть текст, соответствующий какому-то ключевому запросу, по которым вы продвигаете свой сайт, например, «перетяжка мягкой мебели» или «купить диван в Москве» и так далее.

В WordPress этот атрибут можно добавит при вставке или редактировании картинки:

Вставка картинки в html

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

Если у вас ещё нет семантического ядра для сайта, то вам могут пригодиться эти статьи:

Атрибут title используется для задания заголовка картинки, которое высвечивается при наведении курсора на картинку:

Вставка картинки в html

Например:

<img src="http://site.ru/images/example.jpg" alt="Вставка изображения" title="Пример вставки изображения">

<img src="http://site.ru/images/example.jpg" alt="Вставка изображения" title="Пример вставки изображения">

В WordPress этот атрибут задаётся в окне редактирования картинки

Вставка картинки в html

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

Как задать размер изображения html?

Для этого в HTML существуют специальные атрибуты для тега img

  • width – для задания ширины картинки
  • height – для задания высоты картинки

Размер картинки мы можем задавать как в пикселях так и в процентах.

Например:

<img src="”http://site.ru/images/example.jpg" alt="Вставка изображения"> <img src="http://site.ru/images/example.jpg" alt="Вставка изображения">

<img src="”http://site.ru/images/example.jpg" alt="Вставка изображения">

<img src="http://site.ru/images/example.jpg" alt="Вставка изображения">

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

  • max-width – максимальная ширина изображения
  • min-width – минимальная ширина изображения
  • max-height – максимальная высота
  • min-height – минимальная высота

Например:

Img { max-width: 300px; }

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

img { height: 200px; width: auto; }

img {

height: 200px;

width: auto;

}

Как сделать картинки адаптивными?

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

  1. 1.При помощи html с использованием атрибута width
    Например:

    <img src="images/example.jpg" alt="Вставка изображения">

    <img src="images/example.jpg" alt="Вставка изображения">

  2. 2.При помощи CSS. Например:

    img { width: 100%; height: auto; }

    img {

    width: 100%;

    height: auto;

    }

Так же не стоит забывать о свойстве max-width, которое позволяет сделать так чтобы на больших экранах ваша картинка занимала не более 300 пикселей, к примеру. А на маленьких оно было на всю ширину.

Делается это следующим образом:

img { width: 100%; max-width: 300px; height: auto; }

img {

width: 100%;

max-width: 300px;

height: auto;

}

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

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

Спасибо что дочитали статью до конца! Если у вас есть какие то вопросы, относящиеся к размещению изображений на сайте – напишите их в комментариях!

Успехов вам и процветания!

С уважением Юлия Гусарь

Отправить ответ

avatar
  Подписаться  
Уведомление о