如何用CSS在响应式网站缩小时隐藏HTML中的图片？

嘿，这个需求其实挺常见的，用CSS的媒体查询就能轻松解决，这也是响应式设计里的标准操作之一。我给你详细拆解几种实现方式，你可以根据自己的布局需求来选：

1. 全局隐藏所有图片（最简单的方案） #

如果希望所有<img>标签在小屏幕下都消失，直接给媒体查询里的img设置隐藏样式就行。你可以自己调整断点宽度（比如下面的767px，也就是屏幕小于768px时触发）：

/* 默认状态：图片正常显示（可根据你的布局调整默认样式） */
img {
  display: block;
  max-width: 100%; /* 可选，保证图片在大屏下自适应 */
}

/* 小屏幕断点：隐藏所有图片 */
@media (max-width: 767px) {
  img {
    display: none;
  }
}

2. 只隐藏特定图片（更灵活的方案） #

如果不想一刀切隐藏所有图片，只想隐藏部分，可以给需要隐藏的图片加个自定义类名，比如hide-on-mobile，然后针对这个类写样式：

HTML部分：

<img class="hide-on-mobile" src="your-image.jpg" alt="描述文本">
<!-- 其他不需要隐藏的图片正常写 -->
<img src="keep-this.jpg" alt="保留显示的图片">

CSS部分：

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none;
  }
}

3. 不同隐藏方式的区别（选适合你的） #

除了display: none，还有几种隐藏元素的方式，适合不同的布局场景：

• display: none：完全移除元素，不会占据页面空间，适合需要释放布局位置的情况（推荐大多数场景使用）
• visibility: hidden：元素会隐藏，但仍保留原来的空间，适合不想打乱原有布局结构的场景
• opacity: 0：元素变成完全透明，同样保留空间，还可以配合过渡动画做渐隐效果，比如：

@media (max-width: 767px) {
  .hide-on-mobile {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* 可选，防止用户点击透明的图片区域 */
  }
}

小提示 #

• 断点宽度可以根据你的设计需求修改，常见的移动端断点有320px（小屏手机）、480px（大屏手机）、767px（平板竖屏）
• 如果你的图片是用<picture>元素实现的响应式图片，同样可以用上面的方法，把选择器改成picture或者给<picture>加类名就行

内容的提问来源于stack exchange，提问作者tekteddy