如何在CSS中当div宽度小于200px时隐藏内部图片？

问题描述 #

现有页面结构如下，.title 元素宽度被设置为父元素的33%：

.entry .title {
  margin-bottom: .5em;
  float: left;
  width: 33%;
  padding-right: 30px;
  text-align: right;
  position: relative;
}

<div class="entry">
  <div class="title">
    <img src="image/logo.svg" alt="logo" />
    <h3>2012 - 2015</h3>
    <p><a href="link">link</a></p>
  </div>
  <div class="body">
    Lorem ipsum...
  </div>
</div>

图片最大宽度为200px，需求是：当.title元素自身宽度小于200px时隐藏这张图片。已知可通过@media按屏幕尺寸隐藏元素，但希望基于元素自身宽度实现该逻辑。

实现方案 #

CSS原生没有直接基于元素自身宽度触发样式的规则，但可以通过以下几种方式实现需求：

1. 使用CSS容器查询（Container Queries） #

这是目前最贴合需求的原生方案，现代浏览器均已支持。

首先给父元素设置容器类型，让子元素能基于它的尺寸做查询：

.entry {
  container-type: inline-size;
}

然后针对.title的宽度阈值编写容器查询规则：

@container (inline-size < calc((200px + 30px) / 0.33)) {
  .title img {
    display: none;
  }
}

解释：因为.title宽度是父元素的33%，且带有30px的右内边距，所以当父元素宽度小于(200px+30px)/0.33≈697px时，.title的可用内容宽度会小于200px，此时触发图片隐藏逻辑。

2. JavaScript监听元素宽度变化 #

如果需要兼容不支持容器查询的旧浏览器，可通过JS实现动态判断：

function toggleTitleImage() {
  document.querySelectorAll('.title').forEach(title => {
    // 计算title的实际内容宽度（扣除右内边距）
    const paddingRight = parseInt(getComputedStyle(title).paddingRight);
    const actualWidth = title.offsetWidth - paddingRight;
    const img = title.querySelector('img');
    
    img.style.display = actualWidth < 200 ? 'none' : 'block';
  });
}

// 页面加载时初始化
toggleTitleImage();
// 监听窗口尺寸变化
window.addEventListener('resize', toggleTitleImage);
// 若有动态修改父元素宽度的场景，需手动调用toggleTitleImage()

3. 结合布局与媒体查询的间接方案 #

如果不想使用JS，可通过调整布局逻辑，结合媒体查询间接匹配.title的宽度阈值：

先将.entry改为弹性布局，确保.title的宽度比例稳定：

.entry {
  display: flex;
}
.title {
  flex: 0 0 33%;
  /* 保留原有样式 */
}

然后根据.title的目标宽度反推触发尺寸，编写媒体查询：

@media (max-width: 697px) {
  .title img {
    display: none;
  }
}

这里的697px是(200px+30px)/0.33的计算结果，确保.title的可用内容宽度小于200px时触发隐藏。

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