编辑:
简单地说,你不能。
移除/隐藏图像元素必须在 CSS 中完成 使用媒体查询或 Javascript。
srcset 和sizes 标签对于选择图像元素的内容源很有用,但它不能控制元素的存在或可见性。
srcset 和 sizes 标签旨在增强响应式 CSS。它们的值应遵循 CSS 中定义的任何断点。
srcset
srcset 是可用图像的列表,浏览器可以选择它们各自的宽度。
根据latest spec,它只会在填充时从该列表中选择:
为了向后兼容,img 元素的src 属性中指定了其中一个 URL。在新的用户代理中,当srcset 属性使用w 描述符时,src 属性将被忽略。
因此,它将1024.jpg 视为唯一选择并忽略default.jpg。
将默认图像添加到 srcset(使用正确的 w 描述符 - 这里我假设 default.jpg 为 768px 宽):
<img
src="default.jpg"
srcset="default.jpg 768w, img/1024.jpg 1024w"
sizes="(min-width: 768px) 768px, 100vw"
/>
尺寸
sizes 告诉浏览器当给定媒体查询为真时图像的宽度。这有助于浏览器计算从srcset 中选择哪个图像。
目前,sizes="(min-width: 768px) 768px, 100vw" 正在告诉浏览器:
"如果视口大于 768px,则图像将是 768px 宽,否则当视口小于 768px 时,图像将是全宽。 p>
我假设您不想在视口小于 768 像素时使用 1024 像素的图像。
要在视口小于 768px 时提示小图像,请改用max-width: 768px:
<img
src="default.jpg"
srcset="default.jpg 768w, img/1024.jpg 1024w"
sizes="(max-width: 768px) 768px, 100vw"
/>