边框半径为50%并进行变换（缩放）的图片

Question

我有一个方形图像，通过使用 border-radius: 50% 将其变成圆形；到目前为止效果很好。但下一步很难做到：我希望通过使用transform:scale将图像缩放“更近”。我的意思是：我不想改变图像的相同尺寸，它应该保持相同的直径。但我想展示图像的一小部分。缩放应该在 :hover 时激活，并且应该在 0.8s 的时间内处理

我的代码在 Firefox 中完美运行，但在 Chrome 和 Safari 中却不能。我的错误在哪里？

我的 HTML：

<div class="hopp_circle_img">
     <img src="... alt="" />
</div>

我的CSS：

.hopp_circle_img {    
width: 100% !important;
height: 100% !important;   
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden; 
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

.hopp_circle_img img {    

   transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s; 
}  
                            
 .hopp_circle_img img:hover {
display: block;
z-index: 100; 
transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
     } 

存在的问题：

1. Chrome：“缩放”有效，但在过渡时间（o，8s）期间图像具有方形边框。转换发生后，它们会被舍入。

2. 野生动物园： 过渡时间被忽略，过渡立即发生，没有“软”缩放。

3. IE：我不敢看 IE，如果它在 Safari 和 Chrome 中都不起作用。

感谢您的想法。我尝试了很多不同的方法，但没有一个有效。

Answer 1

根据 Harry 修复方块的建议，这个也应该可以在 Safari 中使用。

首先，带前缀的属性应该位于无前缀之前，其次，不要像那样使用all

transition: all ...

在本例中命名要转换的属性

transition: transform 0.8s

注意，您需要添加回其余的前缀属性

.hopp_circle_img {
  position: relative;           /*  new property added  */
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;                   /*  new property added  */
}
.hopp_circle_img img {
  -webkit-transition: transform 0.8s;    /*  re-ordered property, named      */
  transition: transform 0.8s;            /*  what to be transitioned         */
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}

<div class="hopp_circle_img">
  <img src="http://lorempixel.com/400/400/nature/1" alt="" />
</div>

Answer 2

好的，我第一次成功了： 将

.hopp_circle_img img:hover

更改为

.hopp_circle_img:hover

修复了 Safari 中的问题。但它仍然保留在 Chrome 中。

Answer 3

为我解决这个问题的是：

.hopp_circle_img { 
    transform: scale(.99);
}