We are creating circular player images within circles, like so:
div.intable-player-image {
border: 1px solid #666;
border-radius: 50%;
margin: 1px auto;
max-height: 25px;
overflow: hidden;
width: 25px;
}<div style="display: flex; width: 150px; ">
<div class="intable-player-image" style="pointer-events: auto;">
<a class="logo" href="/">
<img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/105304-965025.png" alt="player-face" style="width: 100%;/* height: 100%; */">
</a>
</div>
<div class="intable-player-image" style="pointer-events: auto;">
<a class="logo" href="/">
<img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/105676-963793.png" alt="player-face" style="width: 100%;">
</a>
</div>
<div class="intable-player-image" style="pointer-events: auto;">
<a class="logo" href="/">
<img src="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104923-1321451.png" alt="player-face" style="width: 100%;">
</a>
</div>
</div>The player portraits come in different proportions. Some are wider than they are tall (first image), while others are taller than wide (2nd and 3rd image). Our aim is to display them uniformly and attractively with a one-size-fits-all approach.
In the provided example, the challenge lies in fitting the first image properly without any white space visible. Any suggestions on adjusting the styles to enhance the presentation of the first image without affecting the appearance of the 2nd and 3rd images? Additionally, enhancing the visibility of the player's face in the 2nd image would be a welcomed improvement to our current solution.