Если background-image
с background-size:cover
не хватает и нужен именно img
, можно сделать так:
div {
position: relative;
overflow: hidden;
border-radius: 50%;
width: 60px;
height: 60px;
}
div img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div>
<img src="https://placekitten.com/400/200">
</div>
К сожалению, стили будут работать лишь для горизонтальных изображения (вроде 400×200), для вертикальных понадобится поменять местами auto
и 100%
у width
и height
. Не знаю, поправимо ли это.
На всякий случай, вариант с background-size:cover
:
div {
border-radius: 50%;
width: 60px;
height: 60px;
background: url("https://placekitten.com/400/200") no-repeat center center;
background-size: cover;
}
<div></div>