How can I fix small pictures in my CSS code?-CodePudding

I'm totally new to CSS and now I'm doing a project that requires CSS knowledge. So if you can help me please.

I need avatars be as big as blue-highlighted square (85px) but they are still small no matter how I try.
Picture: https://i.stack.imgur.com/b9Jsq.png. What can it be?

.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
}

CodePudding user response：

The image will take on its 'natural dimensions' if you don't specify them.

In this case I think you may want every avatar to cover the 85x85 parent div regardless of what its initial dimensions are (possibly too big, possibly too small).

The value 'cover' will do this. It expands (or shrinks) the image suitably and as necessary cuts off the top/bottom or the sides so it is not distorted but it fills the whole space.

You may find your initial images are a bit too low definiton so they end up fuzzy in which case either get better definition ones or make the parent div smaller.

.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 >
  <div >
    <div >
      <div >
        <img src="https://picsum.photos/id/237/300/200">
      </div>
    </div>
  </div>
</div>

CodePudding user response：

"A Haworth" user's answer was right, didn't even had to play with 'object-fit', only change 'max-height' to just 'height'. Thanks!