Jump to content

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


brian1010011010
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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 by brian1010011010
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...