Сергій Сироїжкін Копірайтер
Простий спосіб, як вставити картинку на сайт html:
Але в такому вигляді зображення буде виведено з оригінальними розмірами, без вирівнювання, без додаткової інформації. Тому, для того, щоб додати картинку більш красиво і правильно, потрібно використовувати додаткові параметри. Розглянемо їх більш детально.
Атрибути тега IMG
Для відображення картинки за допомогою тега IMG використовуються наступні параметри:
- width / height - вказує ширину / висоту зображення (у відсотках або пікселях);
- align - вирівнювання картинки (right, left, center);
- border - визначає товщину рамки навколо малюнка (в пікселях). Якщо атрибут не заданий явно, то використовується значення за замовчуванням (border = 0);
- hspace / vspace - вказує розмір горизонтального / вертикального відступу від картинки до навколишнього контенту.
Розглянемо тепер, як зробити картинку в html коді:
Тут розміри вказані в пікселях.
Адаптивні розміри картинки за допомогою HTML
Якщо ви верстаєте «гумовий» або «адаптивний» дизайн сайту, то в html код картинки варто вказувати розміри в процентах. Спробуйте створити HTML-сторінку з вказаними нижче кодом (попередньо помістивши поруч з html-файлом картинку з ім'ям "img.jpg") і змінювати розмір вікна браузера. Ви побачите, що розмір картинки буде змінюватися в залежності від розміру вікна.