HTML-图像宽度和高度与响应式图像
在我的网页上,我正在使用一些响应式图像(使用Bootstrap 5 IMG-Fluid类)。在CSS中,我刚刚定义了宽度:100%的宽度,并且由于它的响应能力,我无法将width
和height
添加到IMG标签本身。
然而,W3C验证器以及SEO工具,PageInsights等都产生了我的图像没有定义宽度和高度。
当然,如果我尝试将固定尺寸添加到IMG标签中,它将保持固定且不再响应。
是否有任何建议可以验证并保持响应迅速,可能不删除引导IMG-fuid类?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好的,所以我终于通过将宽度和高度插入到IMG标签中,在CSS中,我保留了
宽度:100%;高度:自动;
现在它验证,并且也具有响应性。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.