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

Question

我是 CSS 的新手，现在我正在做一个需要 CSS 知识的项目。所以如果你能帮助我，请。

我需要头像和蓝色高亮正方形（85px）一样大，但无论我怎么尝试，它们仍然很小。
图片：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
}

Answer 1

如果您不指定图像，图像将采用 'natural dimensions'。

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

值'cover' 将执行此操作。它适当地扩展（或缩小）图像，并在必要时切断 top/bottom 或侧面，这样它就不会变形，但会填充整个 space.

您可能会发现初始图像的清晰度有点太低，因此它们最终会变得模糊，在这种情况下要么获得更好的清晰度，要么使父图像 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>

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

How can I fix small pictures in my CSS code?

css

size

image