Тег IMG, атрибут width

How to Get Image Size Using JavaScript

You can get the original width and height of an image using the HTML5 image naturalWidth and naturalHeight properties, which are supported in almost all major browsers.

html> html> head> title>Title of the Document title> head> body> div>Click on img to see the result div> script> let img = document.createElement('img'); img.id = 'imgId'; img.src = '/uploads/media/default/0001/05/e9f3899d915c17845be51e839d5ba238f0404b07.png'; document.body.appendChild(img); img.addEventListener("click", imgSize); function imgSize( ) < let myImg = document.querySelector("#imgId"); let realWidth = myImg.naturalWidth; let realHeight = myImg.naturalHeight; alert("Original width=" + realWidth + ", " + "Original height=" + realHeight); > script> body> html>

To get the current width and height, you can use the JavaScript clientWidth and clientHeight properties. These are DOM properties that show the current in-browser size of the inner dimensions of a DOM element, excluding margin and border.

html> html> head> title>Title of the Document title> style> img < margin: 20px; > style> head> body> div>Click on img to see the result div> script> let img = document.createElement('img'); img.id = 'imgId'; img.src = 'https://pbs.twimg.com/profile_images/1144166476682813440/o23kohmr_400x400.png'; document.body.appendChild(img); img.addEventListener("click", imgSize); function imgSize( ) < let img = document.getElementById('imgId'); //or however you get a handle to the IMG let width = img.clientWidth; let height = img.clientHeight; alert("Original width=" + width + ", " + "Original height=" + height); > script> body> html>

The naturalWidth and naturalHeight Properties

The naturalWidth and naturalHeight are read-only properties that return the original width and height of an image, respectively. As the width and height of an image displayed on the webpage can be altered using the ‘width’ and ‘height’ attributes of the tag, the naturalWidth and naturalHeight properties are used in situations where original width or height of the image is required.

Источник

HTMLImageElement: height property

The height property of the HTMLImageElement interface indicates the height at which the image is drawn, in CSS pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it’s the natural, pixel density corrected height of the image.

Value

An integer value indicating the height of the image. The terms in which the height is defined depends on whether the image is being rendered to a visual medium or not.

• If the image is being rendered to a visual medium such as a screen or printer, the height is expressed in CSS pixels.
• Otherwise, the image’s height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalHeight .

Examples

In this example, two different sizes are provided for an image of a clock using the srcset attribute. One is 200px wide and the other is 400px wide. Further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport’s width.

HTML

Specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it’s drawn at 300px.

p>Image height: span class="size">?span>px (resize to update)p> img src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png" alt="Clock" srcset=" /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w, /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w " sizes="(max-width: 400px) 200px, 300px" /> 

JavaScript

The JavaScript code looks at the height to determine the height of the image given the width at which it’s currently drawn.

const clockImage = document.querySelector("img"); let output = document.querySelector(".size"); const updateHeight = (event) =>  output.innerText = clockImage.height; >; window.addEventListener("load", updateHeight); window.addEventListener("resize", updateHeight); 

Result

This example may be easier to try out in its own window.

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Tag

The tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag has two required attributes:

• src — Specifies the path to the image
• alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed

Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the tag inside an tag (see example below).

Browser Support

Attributes

Attribute	Value	Description
alt	text	Specifies an alternate text for an image
crossorigin	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
height	pixels	Specifies the height of an image
ismap	ismap	Specifies an image as a server-side image map
loading	eager lazy	Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc	URL	Specifies a URL to a detailed description of an image
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information to use when fetching an image
sizes	sizes	Specifies image sizes for different page layouts
src	URL	Specifies the path to the image
srcset	URL-list	Specifies a list of image files to use in different situations
usemap	#mapname	Specifies an image as a client-side image map
width	pixels	Specifies the width of an image

Источник

Атрибут height

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width . Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений, размещенных внутри таблицы.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее. Но качество рисунка при этом ухудшается.

Синтаксис

Значения

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Исходная высота изображения.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник