CODEWITHSUNDEEP
htmlcss
J. Ayo
J. Ayo

Reputation: 560

W3C validation error with image width

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.

Upvotes: 6

Views: 21946

Answers (3)

Shoeb Mirza
Shoeb Mirza

Reputation: 918

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>

Upvotes: 9

lakhvir kumar
lakhvir kumar

Reputation: 265

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%
}

Upvotes: 4

Gumma Mocciaro
Gumma Mocciaro

Reputation: 1215

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%"

Upvotes: 0

Related Questions