Question

只是想知道是否有人知道如何在<picture>元素中隐藏某些宽度的图像，而不是用其他图像替换它们。

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

这对于在两个版本中位于相同位置的图像（例如两段文本之间）显示移动与桌面的不同图像是一种更简单的方法。

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

例如，我发布的帖子中的第一张图片宣传了我30天的挑战：http://www.smartfertilitychoices.com/pcos-diet-plan/ （仍然使用@media查询这篇文章）

是否可以使用<picture>元素隐藏/显示某些宽度的图像？

我希望这是有道理的，并提前感谢！

Answer 1

yyyy-MM-dd hh:mm:ss

调整浏览器大小以查看以不同视口大小加载的不同版本的图片。

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

Answer 2

只需使用bootstrap类。您可以选择以下取决于您想要的宽度尺寸

<div class = "hidden-xs "></div>
<div class = "hidden-sm "></div>
<div class = "hidden-md "></div>
<div class = "hidden-lg "></div>

供参考：

但如果你想要将它设置在一个非常特定的宽度，那么只需使用媒体查询。

想进一步了解Bootstrap？然后看看这个： https://getbootstrap.com/docs/3.3/css/