Question

我需要显示上传图片中的圆形头像。如果用户上传平方的图像（宽度等于高度），则没有问题。

如果我知道宽度大于高度或小于高度，则可以解决问题。

但是实际上，我不知道这是我无法使用jquery的问题。

我正在使用react.js，当前状态是这样；

当宽度更长时，我编写了一个代码，因为宽度通常比高度长。

Avatar which is cut left and right

Answer 1

对此有很多方法。最简单的方法是通过CSS将图像扩展到元素的边界，同时保持其长宽比。

OR

您可以限制用户仅使用前端验证上传特定尺寸的图像，也可以根据自己的喜好通过Cloudinary之类的API服务来处理图像，然后使用它。

使用CSS

img{
  width: 200px;
  height: 200px;
  object-fit:cover; /*this property does the magic*/
  border-radius:50%;
}

.avatar{
  width: 200px;
  height: 200px;
  background: url("https://www.milesanthonysmith.com/uploads/1/4/0/0/14006904/anchor-beard-style-1_orig.png") center center;
  background-size:cover; /*this property does the magic*/
  border-radius:50%;
}

<!--using in a image element-->
<img src="https://www.milesanthonysmith.com/uploads/1/4/0/0/14006904/anchor-beard-style-1_orig.png" alt="">

<!--using in a div-->
<div class="avatar"></div>

希望这会有所帮助！

Answer 2

您可以在纯JavaScript中通过简单地检查图像的高度和宽度来做到这一点。简单的例子：

var img = document.getElementById("profile-picture");
if(img.height === img.width){
  console.log("Height and width are equal");
} else if (img.height > img.width) {
  console.log("Height is greater than width");
} else {
  console.log("Width is greater than height");
}

<img id="profile-picture" src="https://image.shutterstock.com/z/stock-photo-picture-of-smiling-handsome-businessman-in-office-265383200.jpg" />

来自不同尺寸图片的头像

2 个答案: