Responsive resizing of images, Using percentage to size responsive images |
Responsive resizing of images, Using percentage to size responsive images |
chris montez |
May 25 2020, 02:43 PM
Post
#1
|
Newbie Group: Members Posts: 19 Joined: 26-April 20 Member No.: 27,299 |
Is this coding wrong for these side by side columns:<p> <img src="../images/bakerfinish700.jpg" width="90%" alt="John Baker Champion"></p>
<p> <img src="../images/seavey700.jpg" width="100%" alt="Seavey Champion"></p>? It gives me the layout I want as the 2 columns reduce to fit a vertical Ipad mini and loads fast. But is it incorrect to do the images this way and do they have to have their width and height designated in pixels with the percentages designated in CSS? I also do my banners this way: <div><img src="../images/21daybanner.jpg" width="100%" alt="Team on the Bearing Sea"></div>. |
pandy |
May 25 2020, 06:37 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You should use either pixels or percent, not a combination of them.
|
chris montez |
May 25 2020, 10:44 PM
Post
#3
|
Newbie Group: Members Posts: 19 Joined: 26-April 20 Member No.: 27,299 |
|
Christian J |
May 26 2020, 06:50 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
is it incorrect to do the images this way and do they have to have their width and height designated in pixels with the percentages designated in CSS? It's valid HTML4, but it seems HTML5 does not permit percent values as WIDTH or HEIGHT attribute values: "The attributes, if specified, must have values that are valid non-negative integers." I think the WIDTH and HEIGHT attributes are optional in both HTML4 and 5. The disadvantage of using IMG percent widths (even in CSS) is that you may have to omit the IMG height in order to make the image scale properly. That in turn makes the page rearrange itself while the image files are loading (since the images' intrinsic heights only become known to the browser one at the time). You may get a faster page rendering with fixed image widths, and instead use CSS media queries to change page layout depend on the browser viewport widths. However that way you can't make the image fill the entire viewport width. |
chris montez |
May 27 2020, 10:21 PM
Post
#5
|
Newbie Group: Members Posts: 19 Joined: 26-April 20 Member No.: 27,299 |
Using the W3School instructions for responsive images , they seem to just list the image , the alt and give the image a class for ex.
{ .responsive width: 100% height: auto; } <p><img src="../images/willowhoriz1.jpg" "class="responsive" alt="coming under the burl arch"></p> I find this interesting as I thought it was bad coding not to list the width and height in the image tag as it speeds up loading. |
pandy |
May 28 2020, 05:58 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If the page isn't image heavy the loading glitch won't be noticeable with today's speeds, so I wouldn't worry too much about it.
About percentage width and HTML 5, I wouldn't worry about that either. It won't validate, but it won't harm anything. But of course you can use CSS just as well and that problem is gone. |
pandy |
May 28 2020, 06:18 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Fact is I wouldn't worry too much about w3schools either. Writing out height: auto is redundant since that is the default value.
|
Christian J |
May 28 2020, 07:07 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I find this interesting as I thought it was bad coding not to list the width and height in the image tag as it speeds up loading. 20 years ago it might have been courteous to specify both, as a fallback for browsers like Netscape 4 that didn't support much CSS. Nowadays it's enough to specify the dimensions with CSS, all browsers will understand that. |
Lo-Fi Version | Time is now: 25th April 2024 - 12:40 PM |