Изображение обрезается, чтобы соответствовать кругному контейнеру

Question

Обычно я выполнял обрезку изображения в css с использованием фонового размера: обложка; но для этого проекта я не буду хранить вещи в html-документе.

Это HTML:

<div class="itemList"> 
    <div class="item"> 
     <img src="images/image.png"> 
    </div> 
</div> 

.item представляет собой круглый контейнер (. Например

border-radius: 100%; 
border: 1px solid black; 
color: #ffffff; 
height: 400px; 
width: 400px; 

)

Я установил фиксированную ширину на изображении, чтобы часть его утечки из контейнера. Парк, который протекает, - это то, что нужно скрывать.

Answer 1

Он должен работать с overflow: hidden;

.item { 
 
    border-radius: 100%; 
 
    border: 1px solid black; 
 
    color: #ffffff; 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
}

<div class="itemList"> 
 
    <div class="item"> 
 
     <img src="http://lorempixel.com/g/500/500/"> 
 
    </div> 
 
</div>