html - 圆形图片的增长效果问题 - css

Question

我向矩形图片添加增长效果没有问题，但是当我添加圆形图片(它是 png)时，它通过背景颜色增长使我增长为矩形。

.grow {
 display: inline-block;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: -webkit-transform;
 transition-property: transform;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }

 .grow:hover {
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
  transform: scale(1.1);
  }

Answer 1

没有圆形元素。只有矩形。

例如，您可以将图像作为具有较大 border-radius 的 div 的背景，或者直接在图像上添加 border-radius。

如果我没有回答问题，请举例说明。