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

Posted 2023-03-06

【中文标题】如何修复 CSS 代码中的小图片？

【英文标题】：How can I fix small pictures in my CSS code?

【发布时间】：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?

【参考方案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>