• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Стоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Как изменить размер картинки в HTML

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

В этой статье мы поговорим о нескольких вариантах изменения размеров картинки в HTML. Для тех, кто только начинает изучать html будет полезно прочитать статью про вывод картинок на странице: HTML тег <img>.

Изменять размер изображения полезно в нескольких случаях:

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

Для изменения размеров картинки html существует два способа:

  • Через атрибуты width и height в теге <img>
  • Через свойства CSS width:N px и height:N px

Например

<html> <head> <style> img.wdth{ width: 100px; height: 100px; } </style> </head> <body> Через атрибуты width и height: <img width="100px" height="100px" src="kartinka.jpg"> Через свойства CSS: <img class="wdth" src="kartinka.jpg"> </body> </html>

В обоих случаях результат примера будет одинаковый: картинка будет 100 пикселей на 100 пикселей.

Примечание

Если не задавать размеры изображения, то она будет выведена в тех размерах, какие есть. Также можно сказать, что если указаны размеры (или только один размер), то картинка будет в пропорции изменена до того размера, который указан. Например, изображение 500х300 пикселей. Если мы укажем ширину в 100 пикселей, то высота картинки изменится пропорционально и составит 60 пикселей (в 5 раз меньше).



Читайте также:
• HTML тег <table> - подробное описание с примерами
• Свойство background CSS
• Свойство position в CSS
• <!DOCTYPE> в html
• Meta viewport
• Meta charset
• Как убрать рамку вокруг картинки в html

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2022 - Zarabotat-Na-Sajte.ru