接手诊所网页开发遇难题：PC与移动端图片显示不一致无法解决

你设置max-width: 100%不生效的核心原因是：当前页面的人员头像没有使用<img>标签插入，而是通过.justinas-picture、.jarek-picture这类空<div>的CSS背景图属性实现的，针对<img>标签的样式规则对背景图不会生效。

以下是两种可直接落地的解决方案：

方案1：调整背景图容器的响应式规则（无需修改HTML） #

找到现有CSS中对应头像容器、员工卡片的样式，按如下规则修改即可：

1. 给头像容器设置自适应宽高，固定图片比例避免变形

.justinas-picture, .jarek-picture {
  width: 100%;
  /* 替换为你实际使用的头像原图的宽高比，保证图片不会拉伸变形 */
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

2. 给员工卡片添加移动端适配的媒体查询，避免固定宽度导致溢出

/* 屏幕宽度小于768px的移动端设备生效 */
@media (max-width: 768px) {
  .justinas, .jarek {
    /* 覆盖原有固定宽度规则，随父容器自适应 */
    width: 100% !important;
    margin-bottom: 24px;
  }
}

方案2：替换为<img>标签，更方便后续维护 #

把HTML中的空头像div替换为img标签，你之前设置的max-width: 100%就可以正常生效：

<!-- 替换前 -->
<div class="justinas-picture"></div>
<!-- 替换后 -->
<img src="对应头像的图片地址" alt="Justinas Vitkus" class="justinas-picture">

补充CSS规则：

.staff img {
  max-width: 100%;
  height: auto;
  display: block;
}

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