CODEWITHSUNDEEP
htmlcss
Flood Gravemind
Flood Gravemind

Reputation: 3803

Confused with Html Image Height and Width

Hi guys I am a little confused about html IMG tag's height and width and the CSS/STYLE Height and Width

<img  alt="Title" src="/someimageurl" style="width:150px" width="150" />

You can see that I have set the width attribute using style as well as width attribute for Image. When we use an Image are these two the same attributes that we are setting or are they different? If they are different then please explain in what way?

Upvotes: 0

Views: 420

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

The HTML attribute width="150" and the CSS declaration width:150px, when applied to the same img element, usually have the same effect (so specifying both is redundant), but they are not the same thing.

The HTML attribute causes the element node, in the document tree, to have the property width set to the value 150. The CSS declaration, when appearing in the style attribute value as here, causes the width property of the style property of the element node to get the value 150px. When rendering the document, the browser uses the width value, interpreted as m (and scales the image to that width if its intrinsic width is different), unless CSS is enabled, in which case the CSS cascade is applied, resulting in the value of 150px to be used.

So if the values were different, the one in the style attribute would win in CSS-enabled browsers.

The HTML attribute value must be a pure number (with pixel as the implied unit) or a percentage. In the CSS declaration, many other units are allowed, too, e.g. the em unit that lets you scale an image in proportion to font size (useful for small images presented in text), though you would normally then scale the height rather than width. In such cases, you could use the HTML attribute as a fallback (for situations where CSS is disabled), based on a guess of a typical font size, e.g. <img ... height=18 style="height: 1em">.

Upvotes: 1

CodeShark
CodeShark

Reputation: 1741

They are the same. No difference between CSS width and HTML width. You shouldn't style a website nowadays with HTML-tags anymore. Use CSS for this.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

They are the same but if you define like that the last one you define in html would take the width by the browser.

Upvotes: 1

C3roe
C3roe

Reputation: 96414

Setting those values per CSS takes precedent over giving them via HTML attributes – so setting them to different values would normally make little sense.

One could argue that setting them via HTML attributes makes the browser know the image dimensions – and therefor the space he has to reserve while rendering the page when the image is not loaded yet – even earlier; but I doubt that this argument would hold up in reality, since rendering in modern browsers AFAIK usually starts only when the CSS is already loaded, and anyway the CSS will most likely influence the whole page layout drastically, so even if the browser was to reserver image space only knowing the HTML at first, he would have to re-render most of the page once the CSS is applied.

Upvotes: 1

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

The width attribute is an obsolete way to specify width. You can only specify width in pixels using it.

From the other hand, the style width is the modern way for specifying width, not only for images, but for any html element. You can specify width in pixels, points, percents and may other units.

The same applies to the height.

Upvotes: 1

Related Questions