侧边栏卡片图片无法填满容器，object-fit的cover与contain均不适用

以下是几种实用的解决方案，根据你的需求选择：

• 优先方案：object-fit: cover + object-position
  用cover确保图片填满容器，再通过object-position调整图片的显示区域，避开你不想裁切的部分，兼顾填满和美观：

  .card img {
    width: 100%;
    height: 100%; /* 或设置容器固定高度 */
    object-fit: cover;
    /* 可根据图片内容调整位置，比如center、top、bottom、left、right，或自定义百分比如30% 70% */
    object-position: center;
  }
  

• 备选方案：背景图实现
  如果不需要使用<img>标签，给图片外层容器设置背景图，同样能实现填满且可控显示区域：

  .card-image-wrapper {
    width: 100%;
    height: 200px; /* 容器固定高度 */
    background-image: url('你的图片地址');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  

• 不推荐方案：object-fit: fill
  这个属性会强制图片拉伸填满容器，但会导致图片变形，仅适合对比例要求极低的场景：

  .card img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  

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