У HTML ми можемо змінити розмір будь-якого зображення, використовуючи такі різні способи:
- Використання тегу HTML
- Використання атрибута Inline style
- Використання внутрішнього CSS
Використання тегу HTML
Примітка: HTML 5 не підтримує атрибути висоти та ширини ![]()
, тому ми повинні використовувати атрибут вбудованого стилю та внутрішні параметри CSS для зміни розміру зображення чи зображення.
Якщо ми хочемо змінити розмір зображення в документі за допомогою Html тег який має відображатися на веб-сторінці, ми маємо виконати кроки, наведені нижче. За допомогою цих кроків ми можемо легко змінити розмір зображення:
Крок 1: По-перше, нам потрібно ввести код Html у будь-якому текстовому редакторі або відкрити існуючий файл Html у текстовому редакторі, у якому ми хочемо змінити розмір зображення.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
крок 2: Тепер помістіть курсор у тег img. І потім, ми повинні використовувати атрибути висоти та ширини тегу img для зміни розміру зображення. Отже, ми повинні ввести ці атрибути:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
крок 3: І, нарешті, ми маємо зберегти файл Html, а потім запустити його.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Перевірте зараз
Результат наведеного вище коду Html показано на наступному знімку екрана:
Використання атрибута Inline Style
Якщо ми хочемо змінити розмір зображення за допомогою вбудованого атрибута стилю, яке має відображатися на веб-сторінці, ми повинні виконати кроки, наведені нижче. За допомогою цих кроків ми можемо легко змінити розмір зображення.
Крок 1: По-перше, нам потрібно ввести код Html у будь-якому текстовому редакторі або відкрити наявний файл Html у текстовому редакторі, у якому ми хочемо використовувати атрибут style для зміни розміру зображення.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
крок 2: Тепер помістіть курсор усередину тег img того зображення, розмір якого ми хочемо змінити. І тоді ми повинні ввести атрибут style відразу після атрибута src. Потім ми повинні ввести властивості ширини та висоти в атрибуті стилю, як показано в наступному блоці:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
крок 3: І, нарешті, нам потрібно зберегти файл Html, а потім запустити його.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Перевірте зараз
Результати наведеного вище коду Html показано на наступному знімку екрана:
Використання внутрішнього CSS
Якщо ми хочемо змінити розмір зображення або малюнка за допомогою внутрішньої каскадної таблиці стилів, яка має відображатися на веб-сторінці, ми повинні виконати кроки, наведені нижче. За допомогою цих кроків ми можемо легко змінити розмір будь-якого зображення.
Крок 1: По-перше, нам потрібно ввести код Html у будь-якому текстовому редакторі або відкрити існуючий файл Html у текстовому редакторі, у якому ми хочемо використовувати внутрішній CSS для зміни розміру зображення.
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
крок 2: Тепер нам потрібно розмістити курсор у тезі head документа Html, а потім визначити стилі всередині тег, як показано в наступному блоці. А потім введіть ширина і висота атрибут у селектор ідентифікатора.
#imagesize { width:100px; height:100px; } крок 3: Тепер нам потрібно ввести ідентифікатор у тег img того зображення, розмір якого ми хочемо змінити:
гігабайт проти мегабайт
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Перевірте зараз крок 5: Тепер нам потрібно зберегти файл Html, а потім запустити файл. На наступному знімку екрана показано результат наведеного вище коду Html:
