这里的代码

<img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" sizes="(max-width: 511px) 60w, 65w">

我预计它会下载2.jpg,但它却下载了4.jpg. 然而,4.jpg 为什么下载2500vw,而我将65w放入sizes中.我正在判断它的视图是1500px.

推荐答案

您不应该使用w作为sizes中的单位.

正确的语法:

<img class="rounded-full w-[60px] h-[60px] sm:w-[65px] sm:h-[65px]" 
srcset="1.jpg 60w, 2.jpg 65w, https://cdn.com/s/files/3.jpg 1000w, 4.jpg 2500w" 
sizes="(max-width: 511px) 60px, 65px">

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

我需要两个HTML标签,以便当另一个隐藏时,一个可见,反之亦然

如何通过扭曲元素来倾斜元素?

将2个Flex列合并为1个交替子列

如果浏览器通过http接收html,为什么客户端内置表单验证不起作用?

如何从elementor中的滑块中获取文本?

HTML中的ARIA标签:在元素内部还是外部?(&Q;

Chatbox底部显示新消息,并向上推送旧消息

如何制作带有粘性头和脚的可滚动车身

元素offsetTop在滚动容器中时没有更改

如何将 元素与常规文本垂直对齐

如何在黑暗模式切换中添加图标

伪元素:after和溢出隐藏

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

奇怪的幻影 div 命名为

CSS:第一个类型的伪类没有按预期工作

删除按钮组件时 bootstrap col-auto 布局高度对齐中断

需要禁用聚焦输入的工具提示(jquery)

使用 bootstrap-icons 的未排序图标堆栈

如何使具有两个元素的 div 行在移动设备中响应