html - 图像裁剪以适合圆形容器

Question

通常我会使用 background-size: cover; 在 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>