当容器宽度小于图片最大宽度（200px）时，可通过媒体查询结合百分比布局的数学关系，精准控制图片的显示与隐藏。
在您的结构中，.title 元素被设为父容器宽度的 33%（即约 1/3），而其中的 元素设置了 max-width: 200px。要实现“当 .title 实际宽度
✅ .title 宽度 = parentWidth × 33% ≈ parentWidth / 3
✅ 要使 .title 宽度
因此，无需 JavaScript 或容器查询（Container Queries）（旧版浏览器不支持），仅用标准 CSS 媒体查询即可优雅解决：
/* 当视口宽度 < 600px 时，.title 宽度必然 < 200px，此时隐藏图片 */
@media screen and (max-width: 599px) {
.entry .title img {
display: none;
}
}⚠️ 注意事项：
-
推荐只隐藏
而非整个 .title（原答案中隐藏 .title 会丢失标题文字和链接，不符合语义与可访问性）；
- 使用 599px（而非 600px）可避免边界值下因四舍五入导致的临界闪烁；
- 若父容器非直接继承视口宽度（如嵌套在固定宽 800px 的 wrapper 中），则需按实际父宽重新计算断点（例如：父宽 600px × 33% ≈ 200px → 断点为 600px）；
- 现代方案（兼容性要求高时慎用）：CSS Container Queries（需父容器设 container-type: inline-size），可真正响应容器尺寸，但目前 Safari 16.4+、Chrome 105+、Firefox 110+ 支持。
总结：基于百分比布局的确定性比例关系，将容器尺寸约束转化为视口断点，是纯 CSS 下高效、可靠且广泛兼容的解决方案。
