变换比例和边界半径

Question

我尝试将悬停效果添加到图像中，我遇到了问题。

在Firefox中一切正常：

但在Chrome中存在问题：

这是我的代码：

<div class="photo">
   <img src="images/photo.jpg" alt="">
</div>



.photo {
   width: 200px;
   height: 200px;
   border: 10px solid $white-color;
   overflow: hidden;
   position: absolute;
   bottom: -50px;
   left: calc(50% - 110px);
   @include border-radius(50%);

   img {
     max-width: 100%;
     height: auto;
     @include scale(1);
     @include transition(.3s ease-in-out);

     &:hover {
       @include scale(1.2);
     }
   }
}

Answer 1

用于Chrome使用前缀 对于此特定用途-webkit-transform：scale（）;

还将其添加到过渡属性

以供将来阅读 List of CSS vendor prefixes?

Answer 2

    <style>
        .photo{
            width: 200px;
            height: 200px;
            border: 10px solid #fff;
            overflow: hidden;
            position: absolute;
            border-radius: 50%;
        }

        .photo img {
            max-width: 100%;
            height: auto;
            transition(.3 s ease-in-out);
        }

        .photo img:hover {
            transform: scale(1.2);
         }


    </style>

<div class="photo">
    <img src="images/photo.jpg" alt="">
</div>