Why is it "wrong" to define an image size by % width alone?

[brian1010011010]

I tried to use the w3c code validator and it was quite helpful in some respects. I found a few nested div elements that were unnecessary and eliminated some pointless code.However, I also got 64 errors that told me that my image width= tags should only contain non-negative integers.I use a few 3-column liquid layouts and define ALL my elements by percentage width. Resultantly, my sites look identical on every device.Why would I sacrifice the flexibility of percentage scaling?Why does the code validator spring this as an error when it works just fine on every browser I've tried?The one and only downside is that some of my elements move slightly the first time the page is loaded. I know that this is because I only define the width of elements, and I'm OK with that. I code the sites lightly enough that they load quite fast and most people, even on mobile, don't even see the flash of unformatted space.I'm not just complaining here. If there's a valid way to accomplish what I've been doing, I want to know, but I don't actually see a problem with the way it works now.Anyone know why it's wrong to define a liquid layout using width percentages?

[Ingolme]

If you want to set percentage widths, use CSS. CSS will override the width and height attributes.

[brian1010011010]

I know you're normally a wealth of information, Foxy, but I'm not sure you understood my question. I'll elaborate:I use CSS to define my columnar layout using width="n%".I resize the window and everything scales nice. Cool enough.Now, I add an image and want it to occupy 50% of my content column's width... I have tried in the past to define the img element with class, etc. but the result was always the same. I would get an image that would look right at only one specific page width because defining it's dimensions in CSS would result in an image whose proportions were dependent on the kerning of the text above and/or below it changing the length of the column.To work around this, I started defining all my image sizes as so: <img src="./image.jpg" width="50%">Resulting in an image that scales properly in both axes and an overall columnar layout that has good cross-browser consistency and looks the same at every screen size (until the div elements are shrunken far enough that no text is visible, anyway).My question is: Why does this result in validation errors when it appears to be a perfectly legitimate cross-platform solution? More importantly, can someone show me an example of where this method might result in anything janky and weird so that I might avoid the pitfall?As it is right now, I'm baffled as to why the w3c validator doesn't recognize "%" as a legitimate width attribute descriptor.

Edited March 30, 2015 by brian1010011010

[dsonesuk]

If you have to individually apply width="50%" to every img tag, there is no difference in using img { width: 50%;}.If you only want to target specific images, say only those using css column styling, use a class that you used to use column styling, to target those images only.column-class img { width: 50%; }

[brian1010011010]

Well, yes, except I don't use 50% on every tag. I actually approximate the square area of each of my advertiser's logos so that someone can't make a logo that nets them much more space by making it taller. They're aware of the policy. As a result, most of the images on my sponsor page have a tag that's tailored to the image.

I could probably make a js that automatically scaled each image for square area total, but it defies my need for elegance and low overhead.

 

The question remains: If every browser supports scaling by width="n%", why does the validator trip?

[dsonesuk]

Apparently html5 changed the values to non negative integer value, why? I don't know, probably a former IE developer who as usual didn't think it through. So yes! browsers do support it as it was supported prior html5, it just html5 treats it as invalid now, but you can use inline css styling, which will override the valid width attribute, and so pass html5 validation.

[Ingolme]

The width attribute is not CSS, it's plain HTML.

The specification states is must be a non-negative positive integer but they don't explain the reasoning behind the decision: http://www.w3.org/TR/html5/embedded-content-0.html#attr-dim-width

Perhaps it's to make it easier to calculate the image's size and position quickly.

 

If you need to use percentages, CSS works. To use CSS inline, you can use the style attribute <img style="width: 50%">

If you're going to give the same width to many different images, it's preferable to use a CSS stylesheet instead of putting it inline.

[dsonesuk]

What if you use images whose height and width would be of correct area spacing, then use specific width attribute to apply appropiate percentage width.Exampleimg[width=‘100‘] { width: 50%; }img[width=‘120‘] { width: 60%; }img[width=‘140‘] { width: 70%; }img[width=‘160‘] { width: 80%; }img[width=‘180‘] { width: 90%; }img[width=‘200‘] { width: 100%; }

[davej]

I have tried in the past to define the img element with class, etc. but the result was always the same. I would get an image that would look right at only one specific page width because defining it's dimensions in CSS would result in an image whose proportions were dependent on the kerning of the text above and/or below it changing the length of the column.

 

I would be interested in seeing a simple example which demonstrates this problem.

[brian1010011010]

davej - I think it was because I was using height and width both as percentages using img width. The problem stemmed from the fact that resizing the window would resize my divs, which would make the text change the height of the div and thus effect the Y-dimension of the image. (overflow:hidden would fix that, but at the cost of losing all the text that kerned below the div). I'll make an example and post it later. As of right now, it looks like img style inline works just as well and passes validation. (Thanks, Ingolme!)

 

dsonesuk - Interesting idea, and might work if I substitute the aspect ratio of the image for it's strict width. The aspect ratio would be a cleaner estimate of how many pixels it would occupy at a given percent width. Might make these guys with the long banners think twice, and encourage them to submit logos that are closer to 1:1 to optimize their footprint.

 

Thanks, everyone!

[brian1010011010]

Dave - I'll link an example when I get a chance.

[faroukekilimanjaro]

i like your approach its full proof way to have a scaling interface on all devices. another approach would be browser sniffing and have different css files for the most common device dimensions

[davej]

"Browser sniffing" is considered an unreliable and obsolete approach.

 

http://www.sitepoint.com/why-browser-sniffing-stinks/

 

https://css-tricks.com/browser-detection-is-bad/