图像剪辑适合圆形容器

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;

一起使用

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;