边框半径为50％且变换(比例)的图片 [英] picture with border-radius 50% and transform(scale)

问题描述

我有一个使用边框半径将正方形图像变成圆形的图像:50％；到目前为止，效果很好.;)但是下一步很难做:我希望图像通过使用transform:scale来接近"缩放.我的意思是:我不想更改图像的相同大小，它应该保持相同的直径.但我想显示图像的一小部分.缩放应在:hover上激活，并应在0.8s的时间内进行处理

I have a sqare image wich is turned into a circle by using border-radius: 50%; That works quite well so far. ;) But the next step is difficult to do: I want the image to zoom "nearer" by using transform: scale. I mean: I dont want to change the same size of the image, it should stay with the same diameter. But I want to show a small section of the image. The zooming should be activated on :hover and it should be processed during a period of 0.8s

我的代码在Firefox中可以完美运行，但在Chrome和Safari中则不能.我的错误在哪里?

My code works perfectly in Firefox, but in Chrome and Safari it does not. Where are my mistakes?

我的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)中，图像具有方形边框.发生转移之后，将它们四舍五入.

The problems:
1) Chrome: The "zoom" works, but during the transition-time (o,8s) the image has sqare borders. After the trasition took place, they are rounded.

2)Safari:过渡时间将被忽略，过渡将立即发生，而无需软"缩放.

2) Safari: The transition-time is ignored, transition takes place immediately, without "soft" zooming.

3)IE:我什至不敢看一下IE，即使它甚至不能在Safari和Chrome中运行也是如此.;)

3) IE: I did not dare to take a look at IE, if it does not even work in Safari and Chrome. ;)

感谢您的想法.我尝试了许多不同的方法，但没有一个起作用.拉斐尔

Thanks for your ideas. I tried many different things, none of them worked. Raphael

推荐答案

使用

With Harry's suggestion to fix the square, this one should work in Safari as well.

首先，带前缀的属性应位于未加前缀的位置，其次，请不要像在

First, prefixed properties should be before unprefixed, second, don't use all as in

transition: all ...

在这种情况下，命名要转换的属性

name the properties to be transitioned, in this case

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>

这篇关于边框半径为50％且变换(比例)的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！