I have a Bootstrap-3 template and at first I had all my images with this code:
<img src="assets/images/1.jpg" alt="1" width="40%" height="2%" border="0">
That worked perfectly as my images were responsive to all device dimensions.
I then ran a HTML/CSS validator and all images where I used above code came back with error, a respectable 59 errors in total(I use a lot of images in my articles blog... ).
So why does above code does not validate??? Its sweet, easy, fast and effective.
I checked alternatives and those are working with max-height, max-width, etc.
Also @media queries becomes necessary, my head is exploding with that since apparently I have to calculate the dimensions of each of my images for each device dimension separately???
Any help, tips, advise to make it fast and easy and above-all error-free, is much appreciated...
You don't say what caused the validator to gag, but I suspect it's the border attribute, which hasn't been valid since ca. 1999.
What is sweet, fast, easy and effective about entering an attribute for every instance? Use css and enter once.
Do a search and replace on border="0".
Ah, sorry, Hi Gary, yes the
Ah, sorry, Hi Gary, yes the error message says this...
"Bad value 40% for attribute width on element image: Expected a digit but saw percentage instead!"
I learned something new today. The use of percentage width or height attribute values has been deprecated in html5. Just one more example of html5 stupidity.
If you validate against html4, those errors will go away.
IMO, except for the border attribute, you're ok. That does speed rendering somewhat, but you'd still be better off using css.
Great, thank you
I am relieved to hear this ...
Related to this I got some issue with CSS-ing the images. I post a new thread on it, hopefully you can help me again. Thanks in advance.
hi,the percentages height and width are used in responsive for all devices not mentioned in sizes,only width are using in percentage,img-responsive class used in all images.