我断断续续地寻找了多年。有一些解决方案可以将化身“裁剪”为矩形。
我想要一个second （可选）让我的用户在网站上的特定位置显示方形头像不合适的头像；
假设在用户XYZ的一条消息中，他的头像是方形的（或圆形的，无所谓）。
在他的个人资料页面上，显示了另一个头像-矩形头像
要清楚：我需要两个不同的化身/图像；一个正方形和一个矩形。他们应该是uploaded separately.
为用户提供矩形大小的备选/第二个头像
1 个回复
SO网友:Charles
如果我理解正确，你想要2（两）个不同的形状，而实际上不是2个不同的图像
如果是，下面的答案是您可以使用的解决方案。
但当我错了，我的答案可能是无用的
我个人会这样做CSS.
我并不是说它总是有效/是解决方案，但对于化身来说，它确实是（imho）最快的简单解决方案，无需更换/编辑/添加其他图像。
下面是一个示例，只需使用css代码即可实现您的目标
我使用了你自己的头像（来自SE）。它是一个方形的img，通过使用CSS代码可以改变形状。
CSS-code 我曾经让它成为可能：Demo 使用HTML/CSS “玩”
.original {
margin: 10px;
width: 128px;
height: 128px;
border: 0px;
}
.skew {
margin: -10px 10px;
width: 128px;
height: 128px;
border: 0px;
transform: skewY(30deg);
}
.scale {
margin: 35px 10 0;
width: 128px;
height: 128px;
border: 0px;
transform: scale(0.6);
}
.round {
margin: 10px;
width: 128px;
height: 128px;
border: 0px;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
}
.no2 {
margin: 10px;
width: 128px;
height: 128px;
border: 0px;
border-radius: 200px 200px 0px 0px;
-moz-border-radius: 200px 200px 0px 0px;
-webkit-border-radius: 200px 200px 0px 0px;
}
.no3{
margin: 10px;
width: 128px;
height: 128px;
border: 0px;
border-radius: 200px 0px 200px 0px;
-moz-border-radius: 200px 0px 200px 0px;
-webkit-border-radius: 200px 0px 200px 0px;
}
.no4{
margin: 10px;
width: 128px;
height: 128px;
border: 0px;
border-radius: 200px 10px 200px 200px;
-moz-border-radius: 200px 10px 200px 200px;
-webkit-border-radius: 200px 10px 200px 200px;
}
.stretch01 {
width: 100px;
height: 200px;
}
.stretch02 {
width: 228px;
height: 128px;
}
CSS-code 在此处使用时，您可以将其添加到style.css 在主题文件夹中（请先从文件中进行备份…）
您可以在中使用以上functions 或templates, 这里有一个例子：
（请在需要的地方调整代码，我没有测试它！！！），
echo \'<p class="no4">\' . bp_displayed_user_avatar( \'type=small\' ) . \'</p>\';
结束