HTML Image Width и Height Свойства

Question

У меня есть очень простой вопрос, я надеюсь прочитать некоторые большие рекомендации :-)

Что такое правильное использование ширины и высоты атрибута?
Предполагая, что мне нужно отобразить изображение с помощью следующей ширины и высоты: 150 х 100 pixles

<img src="..." alt="My Image" width="300" height="200" /> // the real width and height 

или

<img src="..." alt="My Image" width="150" height="100" /> // the desired width and height (also defined in CSS) 

Answer 1

Вы должны отображаться ширина/высота, как размер в пикселях на экране.

w3schools HTML width attribute documentation

Если высота и ширина установлены, пространство, необходимое для изображения защищены, когда страница загружена. Однако, без этих атрибутов, браузер не знает размера изображения, и не может зарезервировать подходящее место. Эффект будет заключаться в том, что макет страницы изменится во время загрузки (при загрузке изображений).

Актуальные размеры изображения, не релевантные. Соответственно будет обрабатываться браузер.

Answer 2

Обычно нужно поддерживать соотношение сторон изображения. Таким образом, вы можете сделать это так:

<img src="..." alt="My Image" width="150"/> 

, который получит в этом случае высоту до 100. Надеюсь, что это поможет.

Answer 3

Ширина и высота в теге img используются для отображения изображения требуемого размера. Если мы установим ширину и высоту изображения. изображение будет отображаться на веб-странице в указанной ширине и высоте. Если мы хотим отображать изображение в размере, отличном от фактического, изображение будет иметь размер до указанной ширины и высоты. Если ширина и высота не указаны, изображение будет отображаться в реальном размере. В большинстве случаев нам не нужно указывать высоту img. Он будет поддерживать соотношение сторон, если будет указана ширина. Так что если вы хотите, чтобы отобразить изображение в 150px х 100px вы можете использовать

<img src="..." alt="My Image" width="150px" height="100px" /> 

или

<img src="..." alt="My Image" width="150px" /> 

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

<img src="..." alt="My Image" width="50%" /> 

Но в HTML5 вы должны указать размеры в пикселях.