gpt4 book ai didi

html - 如何使用css制作圆形图像

转载 作者:太空宇宙 更新时间:2023-11-04 05:35:12 26 4
gpt4 key购买 nike

我正在尝试在一个简单的 div 中制作一个 50% 的圆形 img。我已经尝试了 2 种方法来做到这一点,但显然这两种方法都不适合我。如果它让事情变得清晰,我得到的图像是正方形的

/*HTML*/

<div class="img-container"></div>

/*CSS*/
.img-container {
background: url("../../../../../assets/img/user-photo.svg") no-repeat center top / cover;
height: 125px;
width: 125px;
border-radius: 50%;
}


/*HTML*/

<div class="img-container">
<img src="path_to_img" alt="User photo">
</div>

/*CSS*/

.img-container {
width: 125px;
height: 125px;

img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}

I am getting quite cropped it in the bottom

我把它的底部剪得很短。在上面的 2 个示例中是否还有其他解决方案或我做错了什么?任何帮助表示赞赏。

最佳答案

这是一些简单的标记,一个 div 容器和图像就足够了。

如果图像可能有不同的大小或形状,您可以使用 object-fit属性以确保它无论如何都能正确显示。只要确保您定义了图像所需的显式大小(高度和宽度),然后您就可以在 img 本身上使用 object-fit: cover 以保持其宽高比并使用所有例如可用空间。

.img-container {
background-color: purple;
padding: 10px 0;
width: 200px;
}

img {
border-radius: 50%;
width: 100px;
height: 100px;
display: block;
margin: 0 auto;
}

img.rect-img {
object-fit: cover;
}
<div class="img-container">
<img src="https://via.placeholder.com/100" alt="User photo">
</div>

<div class="img-container">
<img class="rect-img" src="https://via.placeholder.com/100x50" alt="User photo">
</div>

关于html - 如何使用css制作圆形图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59756859/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com