如何通过@media修改div内部组件的高度且不改变父div本身的尺寸

不需要修改外层div的原有样式参数，直接通过后代选择器定位div内部的img元素，单独编写媒体查询规则调整高度即可，不会对外层div的原有样式产生任何影响。

完整CSS代码示例 #

/* 图片基础适配样式（可选），避免图片溢出父容器 */
.tik1 .ffdsg {
  max-width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例不变形，自动裁剪适配尺寸 */
  border-radius: inherit; /* 继承父div的圆角，避免图片超出圆角显示 */
}

/* 媒体查询示例：屏幕宽度小于768px时调整图片高度 */
@media (max-width: 768px) {
  .tik1 .ffdsg {
    height: 200px; /* 可替换为你需要的高度值 */
  }
}

/* 可按需新增其他断点的规则，示例：屏幕宽度小于480px时 */
@media (max-width: 480px) {
  .tik1 .ffdsg {
    height: 150px;
  }
}

补充说明 #

• 媒体查询的断点阈值、图片高度值都可以根据你的实际适配需求自由调整
• 如果你需要图片高度和父div高度保持一致，直接把媒体查询里的图片高度设为height: 100%即可

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