Using percentages for height and width for images;

[ronbon]

Hi,

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… Big smile ).

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…

[ronbon]

Hi,

It appeared that it didnt validate because I checked in HTML5, but in HTML4 no errors!

Yes, I used style property, much better ofcourse, but I have problems getting the images to be responsive so I use percentages (but the problem with that is that auto-resizing cant be supported anymore). Looks to be a trade-off… :(

[Author]

Posts