HTML позволяет нам использовать изображения на веб-страницах и делать их более привлекательными, применяя различные стили. Если вам нужно изменить соотношение сторон изображения или ваше изображение не соответствует макету вашей веб-страницы, вы можете изменить его размер. Для этого можно использовать « ширина ' а также ' высота ” свойства на “ изображение ' ярлык. Значения этих свойств можно легко установить в пикселях CSS.

В этом руководстве вы узнаете, как изменить размер изображения в HTML.

Перед запуском необходимо добавить изображение в файл HTML, над которым будет выполняться операция изменения размера изображения.

Как вставить изображение в HTML?

Чтобы добавить изображение в HTML, используйте следующий синтаксис:

Описание вышеупомянутого синтаксиса приведено ниже. “ изображение ” использует два атрибута:

• • «источник» используется для предоставления пути (URL) изображения.
  • 'все' используется для предоставления альтернативного текста, если изображение не отображается.

HTML

Код ниже представляет два div. В первый div мы добавили заголовок вверху по центру нашей веб-страницы как « Размер изображения в HTML ” с помощью тега

:

< див >
< центр >
< h1 > Размер изображения в HTML h1 >
центр >
див >

Второй div добавляется с классом с именем « контейнер ”, а для представления изображения в центре мы использовали тег

. Внутри центра напишите приведенный ниже код, чтобы добавить изображение:

< див учебный класс знак равно 'контейнер' >
< центр >
< изображение источник знак равно 'изображения/бабочка.jpg' все знак равно 'Альтернативный текст' >
центр >
див >

Выбранное изображение с “ 640*437 соотношение сторон будет выглядеть так:

В следующем разделе будет продемонстрирован метод изменения размера изображения.

Как изменить размер изображения в HTML?

Вы можете настроить размер изображения или изменить его размер, используя « ширина ' а также ' высота ”, чтобы задать его ширину и высоту.

Теперь давайте установим значение ширины добавленного изображения как « 300 ” и посмотрите, как это работает:

< изображение источник знак равно 'изображения/бабочка.jpg' все знак равно 'Альтернативный текст' ширина знак равно '300' >

Видно, что ширина изображения изменена, и размер изменен успешно:

Помимо ширины, « высота Атрибут ” также можно использовать для той же цели. Чтобы увидеть разницу в размерах, установите « 550 ” пикселей как высота изображения:

< изображение источник знак равно 'изображения/бабочка.jpg' все знак равно 'Альтернативный текст' ширина знак равно '300' высота знак равно '550' >

Вы можете четко наблюдать разницу в размере изображения:

Вот как атрибуты ширины и высоты используются для изменения размера изображения.

Вывод

В HTML « высота ' а также ' ширина Атрибуты используются для изменения размера изображения. Вы можете изменить соотношение сторон добавляемого изображения по умолчанию, установив значения этих атрибутов. В результате можно увидеть явную разницу в отношении размера изображения. В этом блоге продемонстрирован метод использования свойств высоты и веса для изменения размера изображений в HTML.