initializing height and width

Page 1 of 1

3 Replies - 609 Views - Last Post: 09 February 2012 - 04:47 AM

#1 bita  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 144
  • Joined: 21-April 09

initializing height and width

Posted 09 February 2012 - 01:41 AM

Hi

Would you please look at the code below and tell me why we should write height and width in 'body' tags and either write the height of images in 'head' tags?(any changes in height and width in 'body' tags won't affect the result by having the height in 'height' tags )
<html>
<head>
<style type="text/css">
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" /><br />
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: initializing height and width

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: initializing height and width

Posted 09 February 2012 - 03:27 AM

I don't quite understand your question. Could you rephrase?

There are a couple of things I can tell you though.

  • The REQUIRED Doctype Declaration is missing from that markup. As a result, the browsers won't know which version of HTML to use so they fall back on the Quirks Mode, which is a basically a compatibility mode for the sort of websites people were making back when Netscape was around. - If you are testing how specific HTML and CSS elements will work, remember to include the doctype. Otherwise you can't trust what the browser is showing you.

  • As a result of being in Quirks Mode, some browsers will incorrectly apply the height styles in your CSS to your images with the assumption that you want it to render the image height as the given % of the screen height. - When rendered correctly, the % height would be ignored, as the images have no parent element with a defined height. -

    The % is not telling the browser to render the images at a X% of it's own set height but rather as X% of it's parent's height. In other words, when you say: img.big { height: 50% }, you are saying: "I want images with the big class to be half the hight of their parent element."

Was This Post Helpful? 1
  • +
  • -

#3 bita  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 144
  • Joined: 21-April 09

Re: initializing height and width

Posted 09 February 2012 - 04:31 AM

Thanks for your complete description.
My question is that, why having described height both in classes(%), and in lines 11 to 13?
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: initializing height and width

Posted 09 February 2012 - 04:47 AM

By default the image will be displayed at it's normal size. The browser will detect it's size automatically and use that. If that is what you want, you don't have to use either the HTML attributes on the <img> tag, or the CSS styles in the head. You can just leave it like:
<img src="myimage.jpg" alt="My Image">

(Note that the "alt" attribute is required!)

However, if you want the image scaled to a different size, you need to specify that size. A decade ago you would use the width and height attributes on the HTML element to do that, but these days we use CSS. Both still work, but CSS will override the HTML attributes.
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1