htmlresponsive-imagescimg

HTML - image width and height versus responsive image


On my webpage I am using some responsive images (using bootstrap 5 img-fluid class). In CSS I have just defined width: 100% for it and as it is responsive, I can't add width and height to the img tag itself.

However then the W3C validator and also SEO tools,PageInsights etc. yields that my images doesn't have width and height defined.

Of course if I try to add the image fixed size to img tag, it stays fixed and not responsive anymore.

Any suggestions to validate and also stay responsive, possibly without removing bootstrap img-fluid class?


Solution

  • Ok, so I finally solved it by inserting width and height to the img tag and in CSS I kept the width: 100%; height: auto; and now it validates and it is also responsive.