Как да вмъкнете картинка на HTML страници

Сергей Syroezhkin копирайтър

Един прост начин да вмъкнете снимка на уебсайт HTML:

Но по този начин изображението се извежда с оригинален размер, без изравняване, без допълнителна информация. Ето защо, за да добавите изображение по-красиво и правилно, ще трябва да използвате допълнителни параметри. Нека ги разгледаме по-подробно.

IMG таг атрибути

Следните параметри се използват за показване на изображения чрез IMG таг:

  • широчина / височина - показва широчина / височина на изображението (в пиксели или процент);
  • подравняване - подравняването (дясно, ляво, център);
  • гранично - определя дебелината на рамката около модела (пиксели). Ако атрибутът не е изрично посочено, тогава стойността по подразбиране (Гранична = 0);
  • hspace / vspace - показва размера на хоризонтална / вертикална напускащи изображения на съдържанието.

Нека сега разгледаме как да се направи една снимка в кода на HTML:

Ето размерите в пиксели.

Adaptive размер на изображението с помощта на HTML

Ако се отпечатва "гума" или "адаптивна" дизайн на сайта, изображенията в HTML код трябва да уточнят размера в проценти. Опитайте се да създадете HTML-страница с кода от картинката по-долу (първо пускане в непосредствена близост до HTML-файл с изображение с име "img.jpg") и преоразмеряване на прозореца на браузъра. Вие ще видите, че размера на изображението, ще варира в зависимост от размера на прозореца.