如何修复 CSS 代码中的小图片？答案

【问题标题】：How can I fix small pictures in my CSS code?如何修复 CSS 代码中的小图片？
【发布时间】：2022-01-21 14:31:52
【问题描述】：

我对 CSS 完全陌生，现在我正在做一个需要 CSS 知识的项目。所以，如果你能帮助我，请。

我需要头像与蓝色突出显示的正方形 (85 像素) 一样大，但无论我如何尝试，它们仍然很小。
图片：https://i.stack.imgur.com/b9Jsq.png。会是什么？

.teambox .player .player_data .avatar {
    display: flex;
    flex-direction: row;
    width: 85px;
    border: 0;
    height: 85px;
    align-items: center;
}

.teambox .player .player_data .avatar img {
    max-width: 85px;
    max-height: 85px;
    border: 0
}

【问题讨论】：

查看您的 HTML 会很有帮助。
欢迎来到 SO；如果答案解决了您的问题，请接受 - 请参阅What should I do when someone answers my question?

标签： css image size

【解决方案1】：

如果您不指定，图像将采用其“自然尺寸”。

在这种情况下，我认为您可能希望每个头像都覆盖 85x85 父 div，而不管其初始尺寸是多少（可能太大，也可能太小）。

'cover' 值会执行此操作。它会适当地扩展（或缩小）图像，并根据需要切断顶部/底部或侧面，使其不会变形但会填满整个空间。

您可能会发现初始图像的清晰度有点太低，因此最终会变得模糊，在这种情况下，要么获得更好的清晰度，要么使父 div 更小。

.teambox .player .player_data .avatar {
  display: flex;
  flex-direction: row;
  width: 85px;
  border: 0;
  height: 85px;
  align-items: center;
}

.teambox .player .player_data .avatar img {
  width: 85px;
  height: 85px;
  border: 0;
  object-fit: cover;
}

<div class="teambox">
  <div class="player">
    <div class="player_data">
      <div class="avatar">
        <img src="https://picsum.photos/id/237/300/200">
      </div>
    </div>
  </div>
</div>

【讨论】：