The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> image width, work-around for image width in percent
ferren
post Nov 4 2014, 05:59 AM
Post #1





Group: Members
Posts: 8
Joined: 10-February 14
Member No.: 20,342



Image width in percent works (even on W3C's practice page), but validators complain bitterly. I want images that scale with page width, and use numbers like width=33%, or 50%, 67%, 90%--and get an error for every <img> tag. What will give me the same result and appease the validators? Example:

<img class="fc" src="B-Images/8.2_Pleroma.jpg" alt="B-Images/8.2_Pleroma.jpg" width="90%">

gets me:

Line 382, Column 90: Bad value 90% for attribute width on element img: Expected a digit but saw % instead.

…"fc" src="B-Images/8.2_Pleroma.jpg" alt="B-Images/8.2_Pleroma.jpg" width="90%">

Syntax of non-negative integer:
One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.

For that matter, was there some pressing *reason* for deprecating percent, or was this done just to make life difficult?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 4 2014, 06:44 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,826
Joined: 10-August 06
Member No.: 7



QUOTE(ferren @ Nov 4 2014, 11:59 AM) *

For that matter, was there some pressing *reason* for deprecating percent, or was this done just to make life difficult?

This only happens when I validate with an HTML5 Doctype. I'll see if I can find something in the HTML5 spec about it. In HTML4.01 and XHTML1.0 you are still allowed to use percent values, though.

You can also use CSS to set a percent width, but for IMG elements that seems a bit inefficient to me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 4 2014, 08:07 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,826
Joined: 10-August 06
Member No.: 7



Here's what the W3C says:

"The width and height attributes on img, [...] if specified, must have values that are valid non-negative integers."
http://www.w3.org/TR/html5/embedded-conten...#attr-dim-width

and:

"The width and height attributes on img, iframe and object are no longer allowed to contain percentages. They are also not allowed to be used to stretch the image to a different aspect ratio than its intrinsic aspect ratio."
http://www.w3.org/TR/html5-diff/#changed-attributes


There's also a discussion here: http://lists.w3.org/Archives/Public/public...read.html#msg40

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 4 2014, 08:10 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE
You can also use CSS to set a percent width, but for IMG elements that seems a bit inefficient to me.

Why? Since the image already has a class.

At W3C, they say the width should be a non-negative integer from 0-9:
http://www.w3.org/TR/html-markup/img.html#img.attrs.width
http://www.w3.org/TR/html-markup/datatypes...er.non-negative
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 4 2014, 10:38 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



If browsers work the same as they used to width and height in the HTML helps them draw the page so it loads nicer without things moving as the images load.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ferren
post Nov 4 2014, 03:09 PM
Post #6





Group: Members
Posts: 8
Joined: 10-February 14
Member No.: 20,342



My problem is that the image caption appears to the right of the image itself, and good page layout wants them to occupy the same height. Although this can't always be achieved, it can be adjusted, to some extent, by changing page width, sometimes in 1% intervals. I do this interactively while watching the page, and it is *much* more convenient to be able to do this in the <img> specification, than to write a new css class for each image! (We're talking 150 images over 25 chapters.) Since pixel resolution changes from device to device, specifying a picture width in pixels means writing code for umpteen devices. What I want is a specifiable percentage of page width for the image! This could be done in HTML 4.1; removing it is an awkward stumble backwards! If no one has figured out an efficient work-around, who do I complain to? (Explore http://evoligion.wordpress.com/home/ for examples.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 4 2014, 05:35 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



In that page, the width and height is set in both the img tag and through CSS:
CODE
<img src="http://evoligion.wordpress.com/wp-content/themes/pub/twentyeleven/images/headers/pine-cone.jpg?m=1354160568g" width="1000" height="288" alt="">

and
CODE
#branding img {
    height: auto;
    margin-bottom: -7px;
    width: 100%;
}

And that validates (though that site has other validation errors).

As for the caption, show us the necessary bits (HTML/CSS) or, better yet, the url of the page (or test page).

This post has been edited by Frederiek: Nov 4 2014, 05:38 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th July 2021 - 11:32 PM