页面缩放时图片尺寸不均，求flex-shrink:0之外的CSS解决方案

我有四行堆叠的内容，每行div里都包含一张图片，正常显示时没有问题，但缩小页面尺寸后，图片的收缩程度不一致，宽度出现差异。已经尝试过用flex-shrink:0解决，现在想寻求其他可行方案。

我的代码如下：

CSS代码 #

.content .pop_tracks {
  margin-top: 2rem;
}

.pop_tracks .title_tracks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* color: #fff; */
  border: 1px solid #f00;
}

.pop_tracks .part_tracks {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  color: #aaaaaa;
  border: 1px solid #808080;
}

.part_tracks .popsong_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 50%;
}

.popsong_info .popsong_name {
  display: flex;
  align-items: center;
  flex-basis: 60%;
}

.popsong_info .popsinger_name {
  flex-basis: 40%;
}

.popsong_name>p {
  /* color: #fff; */
  flex-basis: 50%;
  margin-left: 10px;
}

.popsong_name .song_number {
  font-size: 1.2rem;
  flex-basis: 1.5rem;
}

.popsong_name .track_image {
  flex-basis: 80px;
  /* flex-shrink: 0; */
  overflow: hidden;
  border-radius: 10px;
  margin-left: 10px;
}

.popsong_name img {
  width: 100%;
  vertical-align: bottom;
}

.part_tracks .popsong_user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 50%;
}

.popsong_user>div {
  margin-left: 1.8rem;
}

.popsong_user i {
  cursor: pointer;
}

.popsong_user .circle-play {
  font-size: 2rem;
}

HTML代码 #

<div class="pop_tracks">
  <div class="title_tracks">
    <h2>Popular Tracks</h2>
    <p>See All</p>
  </div>
  <div class="part_tracks">
    <div class="popsong_info">
      <div class="popsong_name">
        <div class="song_number">01</div>
        <div class="track_image">
          <img src="https://somethingaboutsandwiches.com/wp-content/uploads/2020/08/fried-egg-sandwich-new-size-500x500.jpg" alt="">
        </div>
        <p>Midnight</p>
      </div>
      <p class="popsinger_name">Teylor Swift</p>
    </div>
    <div class="popsong_user">
      <div>
        <i class="fa-solid fa-clock"></i>
        <span>03:09</span>
      </div>
      <div>
        <i class="fa-solid fa-headphones"></i>
        <span>46K</span>
      </div>
      <div>
        <i class="fa-regular fa-heart"></i>
        <span>6K</span>
      </div>
      <div>
        <i class="fa-regular fa-circle-play circle-play"></i>
      </div>
    </div>
  </div>
  <div class="part_tracks">
    <div class="popsong_info">
      <div class="popsong_name">
        <div class="song_number">02</div>
        <div class="track_image">
          <img src="https://www.wonderplugin.com/wp-content/uploads/2016/06/blue-grape-hyacinths.jpg" alt="">
        </div>
        <p>Rock A Chock</p>
      </div>
      <p class="popsinger_name">Mehrad Hidden</p>
    </div>
    <div class="popsong_user">
      <div>
        <i class="fa-solid fa-clock"></i>
        <span>04:35</span>
      </div>
      <div>
        <i class="fa-solid fa-headphones"></i>
        <span>84K</span>
      </div>
      <div>
        <i class="fa-regular fa-heart"></i>
        <span>4K</span>
      </div>
      <div>
        <i class="fa-regular fa-circle-play circle-play"></i>
      </div>
    </div>
  </div>
  <div class="part_tracks">
    <div class="popsong_info">
      <div class="popsong_name">
        <div class="song_number">03</div>
        <div class="track_image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Gallet_clamshell_600x600_movement.jpg" alt="">
        </div>
        <p>Be Khod Ay</p>
      </div>
      <p class="popsinger_name">Madgal</p>
    </div>
    <div class="popsong_user">
      <div>
        <i class="fa-solid fa-clock"></i>
        <span>03:24</span>
      </div>
      <div>
        <i class="fa-solid fa-headphones"></i>
        <span>67K</span>
      </div>
      <div>
        <i class="fa-regular fa-heart"></i>
        <span>9K</span>
      </div>
      <div>
        <i class="fa-regular fa-circle-play circle-play"></i>
      </div>
    </div>
  </div>
</div>

方案1：固定图片容器宽高+object-fit保持比例 #

给图片容器设置固定宽高，同时让图片用object-fit:cover维持比例，确保页面缩放时容器尺寸一致，图片不会变形：

.popsong_name .track_image {
  flex-basis: 80px;
  width: 80px; /* 新增固定宽度 */
  height: 80px; /* 新增固定高度 */
  overflow: hidden;
  border-radius: 10px;
  margin-left: 10px;
}

.popsong_name img {
  width: 100%;
  height: 100%; /* 新增高度100% */
  object-fit: cover; /* 新增保持图片比例 */
  vertical-align: bottom;
}

方案2：用Grid布局控制图片容器宽度 #

将popsong_name的flex布局替换为grid，给每个子项指定固定列宽，彻底规避flex的收缩机制问题：

.popsong_info .popsong_name {
  display: grid; /* 替换flex为grid */
  grid-template-columns: 1.5rem 80px 1fr; /* 给序号、图片、歌曲名指定列宽 */
  align-items: center;
  gap: 10px; /* 用gap代替margin-left */
  flex-basis: 60%;
}

.popsong_name .track_image {
  /* 去掉margin-left，用grid的gap代替 */
  overflow: hidden;
  border-radius: 10px;
}

.popsong_name>p {
  /* 去掉margin-left */
  /* color: #fff; */
}

方案3：给图片容器设置最小宽度 #

给图片容器添加min-width，确保空间不足时不会被压缩到小于设定值，同时保留flex的其他布局特性：

.popsong_name .track_image {
  flex-basis: 80px;
  min-width: 80px; /* 新增最小宽度 */
  overflow: hidden;
  border-radius: 10px;
  margin-left: 10px;
}

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