HTML5 img sizing

[Banjoman]

I'm converting an old site from html 4.01 to html5 (mainly just to learn what's new) and trying to avoid sizing anything in pixels. When I run my html thru the W3C validator, I get errors like this:

Bad value 45% for attribute width on element img: Expected a digit but saw % instead.

 

for a line that looks like:

<img class="imgright" alt="whatever" src="img/someimage.jpg" width="45%" />

 

The CSS for "imgright" is:

.imgright {

border: 5px ridge;

background: #655A46;

padding: 2px;

margin-left: 2%;

float: right;

}

 

From what I'm reading around the net, its acceptable to size things in pixels (e.g., width="250") in the HTML but using the % is not acceptable. The HTML works fine with the % in all the browsers I've tried, but I prefer to do things right.

 

So what is the correct solution? Make a new class (or ID) in css for each size of image I might need?

[Wickham]

width="45%" or width="45px" are teh old method of styling and perhaps HTML5 is objecting to a deprecated method. You should use a class or id and separate styling in the styesheet for the width. Img tags used on their own need display: block for width, height, margin etc. to work.

.imgright {
width: 45%;
display: block;
border: 5px ridge;
background: #655A46;
padding: 2px;
margin-left: 2%;
float: right;
}

Delete width="45%" in the markup. Does that work?

[Banjoman]

width="45%" or width="45px" are teh old method of styling and perhaps HTML5 is objecting to a deprecated method. You should use a class or id and separate styling in the styesheet for the width. Img tags used on their own need display: block for width, height, margin etc. to work.

.imgright {
width: 45%;
display: block;
border: 5px ridge;
background: #655A46;
padding: 2px;
margin-left: 2%;
float: right;
}

Delete width="45%" in the markup. Does that work?

 

That definitely works. The idea I'm having trouble with is say I have 10 images for display. One of them needs to be 45%, another 50%, another 10%, etc. Do I now make classes in the CSS for

.imgright45 {width=45%; ...}
.imgright50 {width=50%; ...}
.imgright10 {width=10%; ...}

 

Or is there a better way?

[newseed]

Yes...you need make a class for each one.

[Banjoman]

I was doing some further reading about "Responsive Web Design" today and came across an article that details ways of dealing with image layout using CSS3 media queries and doing conditional layout depending on the actual screen width. A List Apart: Responsive Web Design

[Johnclr]

try this one :

 

<figure>

<img id="robAtGreenfields" src="Rob_at_Greenfields.jpg" alt="Rob at Greenfields" width="342" height="514"

style="border: 3px outset gray;">

<figcaption style="clear: left;margin: .75em 0;text-align: center;font-style: italic;line-height: 1.5em;"

<br/>>I am an IT expert, but I want to be a rock star!

<br>Image courtesy of <a href="http://www.christopp.ca/home.htm">Chris Topp Photography</a></figcaption>

</figure>

Edited April 24, 2013 by Andrea
Link Deleted