# 如何在手机和桌面上隐藏和显示图片

**URL:** <https://meta.discourse.org/t/how-to-hide-and-show-images-on-mobile-desktop/339476>\
**Category:** Support\
**Created:** [2024年十一月30日 10:43 UTC](https://meta.discourse.org/t/how-to-hide-and-show-images-on-mobile-desktop/339476 "2024-11-30T10:43:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hoangviet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangviet/32/174417_2.png) [@hoangviet](https://meta.discourse.org/u/hoangviet)\
**Post date:** [2024年十一月30日 10:43 UTC](https://meta.discourse.org/t/how-to-hide-and-show-images-on-mobile-desktop/339476/1 "2024-11-30T10:43:25Z")

</div>

在一篇帖子中，有 10 张图片。  
前 5 张图片，如何在移动设备上隐藏（在桌面上仍然显示）。  
后 5 张图片，如何在桌面上隐藏（在移动设备上仍然显示）。  
有什么合理的 HTML 和 CSS 可以让我做到以上几点吗？  
非常感谢 Discourse 专家。

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年十一月30日 13:25 UTC](https://meta.discourse.org/t/how-to-hide-and-show-images-on-mobile-desktop/339476/2 "2024-11-30T13:25:24Z")

</div>

嘿，

我认为最可靠的方法是包装图像。

```html
[wrap="hide-mobile"]
...前五张图片
[/wrap]

[wrap="hide-desktop"]
...后五张图片。
[/wrap]

```

然后是 CSS：

在移动设备选项卡中：

```css
[data-wrap="hide-mobile"] {
    display: none;
}

```

在桌面选项卡中：

```css
[data-wrap="hide-desktop"] {
    display: none;
}

```

你觉得怎么样？