Css 来自不同大小图像的化身

我需要显示从上传的图像圆形化身。 如果用户上传方形图像（宽度等于高度），那么就没有问题

如果我能知道宽度比高度长或短，我就能解决这个问题

但事实上，我不知道这个问题，我不能使用jquery

我正在使用react.js，当前状态如下

我在宽度较长时编写了一个代码，因为宽度通常比高度长

---

在纯JavaScript中，只需检查图像的高度和宽度即可完成此操作。简单的例子：

var img=document.getElementById（“配置文件图片”）；
如果（img.height==img.width）{
控制台。原木（“高度和宽度相等”）；
}否则如果（img.高度>img.宽度）{
控制台。原木（“高度大于宽度”）；
}否则{
控制台。原木（“宽度大于高度”）；
}

---

有很多方法可以做到这一点。最简单的方法是通过CSS将图像扩展到元素的边界，同时保持其纵横比

或

您可以使用前端验证限制用户仅上载特定维度的图像，或通过API服务（如）根据您的喜好处理图像，然后使用它

使用CSS

img{
宽度：200px；
高度：200px；
对象适合度：cover；/*此属性发挥了神奇的作用*/
边界半径：50%；
}
.阿凡达{
宽度：200px；
高度：200px；
背景：url（“https://www.milesanthonysmith.com/uploads/1/4/0/0/14006904/anchor-beard-style-1_orig.png）中心；
背景大小：cover；/*此属性发挥了神奇的作用*/
边界半径：50%；
}