这可能吗?我希望图像是一个完美的圆形,无论图像是不是一个完美的正方形,即:100px x 100px.
.circle {
border-radius: 50%;
height: 100px;
width: 100px;
}
使用该代码,如果图像是200×150,则img标签将呈椭圆形.无论图像大小如何,我都可以获得完美的圆圈吗?
最佳答案
不,您需要将图像包装在div中,将舍入应用于该值并隐藏任何溢出.
在这里,我还使用flexBox将图像集中在一起,但这不是必需的.
.circle {
border-radius: 50%;
height: 100px;
width: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}