如何通过CSS在div容器高度超530px时将图片宽度从525px改为508px

原代码无法生效的原因如下：

• 错误使用@media媒体查询：媒体查询只能检测浏览器视口尺寸，无法监听.ccontainer容器本身的高度变化
• CSS属性值缺失单位：width: 525、width: 508没有加长度单位px，属于无效CSS规则，浏览器不会解析
• 选择器不匹配：包裹图片的div设置的是class="img"，原CSS却用id选择器#img匹配，无法命中元素
• HTML语法错误：第一个<p class="text">的闭合标签缺失p字符，属于结构错误
• 阈值设置错误：原媒体查询写的5px阈值和需求要求的530px触发点完全无关

使用CSS容器查询（Container Queries，支持所有现代浏览器）可以直接监听容器自身尺寸变化，不需要JS，完整代码如下：

/* 将ccontainer声明为可被查询的容器，允许监听其宽高变化 */
.ccontainer {
  container-type: inline-size block-size;
}

/* 默认样式：容器高度≤530px时，图片宽度为525px */
.ccontainer .img img {
  width: 525px;
  display: block;
  margin: auto;
  object-fit: cover;
}

/* 触发规则：当ccontainer自身高度≥530px时，图片宽度调整为508px */
@container .ccontainer (min-height: 530px) {
  .ccontainer .img img {
    width: 508px;
  }
}

.img {
  max-height: 670px;
  overflow-x: auto;
}

修正后的HTML结构（修复了原标签闭合错误）：

<div class="ccontainer">
  <p class="text">text</p>
  <div class="img">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" id="img1">
  </div>
  <p class="text">text</p>
</div>

如果需要兼容Chrome 105、Safari 16以下的老旧浏览器，纯CSS没有完美的容器尺寸监听方案，可通过少量JS监听容器高度变化、动态添加类名的方式实现降级。

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