HTML-图像宽度和高度与响应式图像

发布于 2025-01-26 05:06:05 字数 287 浏览 3 评论 0原文

在我的网页上,我正在使用一些响应式图像(使用Bootstrap 5 IMG-Fluid类)。在CSS中,我刚刚定义了宽度:100%的宽度,并且由于它的响应能力,我无法将widthheight添加到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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

隱形的亼 2025-02-02 05:06:05

好的,所以我终于通过将宽度和高度插入到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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文