只是想知道是否有人知道在 <picture> 中隐藏图像的方法特定宽度的元素，而不是用另一张图片替换它们。
以前我在我的自定义 CSS 中使用@media 查询显示/隐藏图像，但最近才知道 <picture>放置图像以特定宽度显示的元素。
对于在两个版本中位于同一位置(例如在两段文本之间)的图像，这是一种更简单的方式来显示移动设备和桌面设备的不同图像。
但是我有一些图片在桌面上的位置会比在移动设备上高一些，例如，我想要在一段文字右侧放置的图片放在该段的开头，但在移动设备上我希望图像出现在段落之后。
例如，我在此处宣传我的 30 天挑战的帖子中的第一张图片:http://www.smartfertilitychoices.com/pcos-diet-plan/ (这篇文章仍然使用@media 查询)
是否可以使用 <picture> 完全隐藏/显示特定宽度的图像？元素？
我希望这是有道理的，提前致谢!
最佳答案
<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 元素。
关于html - 使用 <picture> 元素完全隐藏图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46969223/