Just making the anchor roundy and setting hidden overflow works. No need for object-fit or javascript. CSS just needs this:
.poster_avatar .linklevel1 {
overflow: hidden;
display: block;
height: 100px;
width: 100px;
margin: 0 auto;
border-radius: 50%;
}
With the template being:
<li class="listlevel1 poster_avatar">
<a class="linklevel1" href="' . $scripturl . '?action=profile;u=' . $message['member']['id'] . '">
' . $message['member']['avatar']['image'] . '
</a>
</li>';
Also, syntax error here. You forgot the background-image lead in for the linear gradient, so that declaration gets dropped and in turn the one after it also gets dropped.
/* Hover effects for those buttons. */
.linklevel1.active:hover, .listlevel1:hover .linklevel1.active,
.linklevel1:hover .pm_indicator {
background: #DDE0E3; linear-gradient(to bottom, #DDE0E3, #EFF0F3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
color: #555;
}
Should be:
/* Hover effects for those buttons. */
.linklevel1.active:hover, .listlevel1:hover .linklevel1.active,
.linklevel1:hover .pm_indicator {
background: #DDE0E3;
background-image: linear-gradient(to bottom, #DDE0E3, #EFF0F3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) inset;
color: #555;
}