html - 使用 元素完全隐藏图像

Question

只是想知道是否有人知道在 <picture> 中隐藏图像的方法特定宽度的元素，而不是用另一张图片替换它们。

以前我在我的自定义 CSS 中使用@media 查询显示/隐藏图像，但最近才知道 <picture>放置图像以特定宽度显示的元素。

对于在两个版本中位于同一位置(例如在两段文本之间)的图像，这是一种更简单的方式来显示移动设备和桌面设备的不同图像。

但是我有一些图片在桌面上的位置会比在移动设备上高一些，例如，我想要在一段文字右侧放置的图片放在该段的开头，但在移动设备上我希望图像出现在段落之后。

例如，我在此处宣传我的 30 天挑战的帖子中的第一张图片:http://www.smartfertilitychoices.com/pcos-diet-plan/(这篇文章仍然使用@media 查询)

是否可以使用 <picture> 完全隐藏/显示特定宽度的图像？元素？

我希望这是有道理的，提前致谢!

Answer 1

<picture>
<source media="(min-width: 1280px)" srcset="Enter your image(1) URL (or) Image(1) Path">
<source media="(min-width: 480px)" srcset="Enter your image(2) URL  (or) Image(2) Path">
<img src="Enter your image(3) URL  (or) Image(3) Path" alt="Image(3)" style="width:auto;">
</picture>

调整浏览器大小以查看在不同视口(viewport)尺寸下加载的不同版本的图片。

IE12 及更早版本或 Safari 9.0 及更早版本不支持 picture 元素。