如何使用CSS调整图片高度？桌面端指定宽高不生效问题求解

• 缺失桌面端媒体查询限制：你当前写的CSS规则对所有设备生效，没有仅在桌面端触发的判断逻辑，不符合「非桌面端样式交由其他规则控制」的需求。
• 外层容器未限制宽度：你要求桌面端图片宽度为376px，但仅给.gaimage容器设置了固定高度，未限制宽度，容器宽度默认撑满父级，导致内部img的width:100%会跟随父容器宽度变化，达不到固定376px的要求。
• 强制固定图片高度导致样式异常：同时给img设置width:100%和固定height:376px会强制拉伸图片，忽略原始宽高比，且如果你的需求是宽度固定为376px、高度随比例自适应，固定高度的写法本身就不符合需求。

先确定你业务中桌面端的断点阈值，以下以常用的≥768px作为桌面端判断标准，可自行调整断点数值：

/* 仅桌面端生效的规则 */
@media (min-width: 768px) {
  .gaimage {
    /* 限制容器宽度为376px，高度默认自适应即可 */
    width: 376px;
  }
  .gaimage img {
    width: 100%;
    /* 高度随图片原始比例自适应，避免拉伸 */
    height: auto;
    /* 如果确实需要固定高度为376px，就把上面的height:auto换成下面两行 */
    /* height: 376px;
    object-fit: cover; */
  }
}

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