如何为 HTML 5 <picture> 设置空图像？答案

【问题标题】：How to set empty image for HTML 5 <picture>?如何为 HTML 5 <picture> 设置空图像？
【发布时间】：2016-03-29 23:23:21
【问题描述】：

我的网站顶部有一个图像，我想在小屏幕尺寸上完全删除它。 HTML 5 <picture> 允许根据屏幕大小更改图像，但当我设置空 URL 时它不起作用（图像仍然始终显示）：

    <picture>
        <source media="(max-height: 650px)" srcset="">
        <img src="img/top.jpg"/>
    </picture>

如果我设置了一个非空但无效的 URL，我会得到一个图片占位符。

如何实现图像的完全移除？

【问题讨论】：

只是一个问题，为什么要使用具有bad browser support 的picture 元素？
@Vucko 因为这是一个业余爱好项目，所以在这种情况下，我总是选择最新的功能，而忽略现实世界浏览器的严酷现实:-)
通过使用 CSS 媒体查询，您可以完全删除图像。例如@media only screen and (max-device-width: 480px) {display:none;} 我猜它会起作用
如果您给srcset 一个值，但将fallback 图像留空，会发生什么情况？

【解决方案1】：

您可以在 (max-width: 1500px) 中更改要完全删除图像的设备的宽度大小。为了您的理解，我给了 1500px。

@media only screen and (max-width: 1500px) {
  picture {display:none;}
}

   <picture>
        <source media="(max-height: 650px)" srcset="">
        <img src="img/top.jpg"/>
    </picture>

【讨论】：