我想创建一个响应式圆圈并且我想要适合图像。我想使用 img
标签而不是 css(背景)
这是我试过的
.circular--portrait {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: auto;
}
<div class="circular--portrait">
<img src="img.jpg" />
</div>
最佳答案
.circular--portrait {
position: relative;
width: 20vw;
height: 20vw;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="circular--portrait">
<img src="http://beerhold.it/500/300" />
</div>
关于html - 响应圆圈和图像适合圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41570348/