2

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?

Improve this question

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this is correct way, but make sure to add the css in the html element like style="width: 100%; height: auto;" but not in the .css files as the HTML's style overrides the stylesheets
did you add random values to html attributes? Or you've add equal values into tag and in the css file?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.