Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML

HTML: Изменение размера картинки

Если для изображения не указаны размеры, то браузер будет отображать его в естественном размере, но он не сможет определить размер до тех пор, пока изображение загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width и height, в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.

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

<html>
  <body>

    <p>
      <img src="1.png" width="40" height="40">
      <img src="1.png" width="80" height="80">
      <img src="1.png" width="120" height="120">
    </p>
    <p>
      Вы можете сделать изображение больше или меньше, изменяя значения атрибутов width и 
      height. Но при очень большом увеличении качество картинки может стать хуже.
    </p>

  </body>
</html>

Результат данного примера в окне браузера:

атрибуты width и height

Если вы решили изменить размер картинки с помощью атрибутов width и height, то следует соблюдать пропорции между шириной и высотой картинки. Изменение пропорций размера картинки приведет к её деформации.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru