如果我理解正确，你想要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;
} 

您可以在中使用以上functions 或templates, 这里有一个例子：
（请在需要的地方调整代码，我没有测试它！！！），

echo \'<p class="no4">\' . bp_displayed_user_avatar( \'type=small\' ) . \'</p>\';