W3C验证错误与图像宽度

Question

I need an image to resize to the full width of my webpage. This works fine with the following HTML/CSS:

 #logo{ position: fixed; top: 0; left: 0; min-width: 100%; z-index: 3; opacity: .8; } 

 <div id="logo"><img src="/logo.png" alt="logo" width="100%"></div> 

However W3C validation picks this up as an error. "Bad value 100% for attribute width on element img: Expected a digit but saw % instead."

I tried this alternative, but now the image does not resize of course:

<div id="logo"><img src="/logo.png" alt="logo" width:100%;></div>

How do I retain the same effect while still passing the W3C validation? It is the only error on my entire page, and I know it doesn't really matter, but there is bound to be a solution I am overlooking.

Answer 1

Kindly use the following code in order for you to have W3C validation

<div id="logo"><img src="/logo.png" alt="logo" width="100%" /></div>

(OR)

<div id="logo"><img src="/logo.png" alt="logo" style="width:100%;" /></div>

Answer 2

Because width attributes does not use % it uses digits like width='100' , means 100px. if you want to apply 100% width on image, use CSS

#logo img {
   width: 100%
}

Answer 3

By reading w3school official documentation

In HTML 4.01, the width could be defined in pixels or in % of the containing element

but also

In HTML5, the value must be in pixels.

So you can't specify a valid width in percentage for HTML5 , tryo to use style="width:100%"