Question

我有一个关于脚本图像转换的问题。

这是我的DEMO页面

在此演示中，您可以看到悬停在图像过渡效果上。它正在使用Chrome，Mozilla Firefox，但不能使用Safari浏览器。

我正在使用此css代码进行图像转换：

.abo_im img {
  width:100%; 
  -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.abo_im:hover img {
  -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

此代码使用转换，但如果您检查它是safari浏览器，那么您会看到图像居中不起作用。

如果我删除这一行：

-webkit-transition: all 1s ease; /* Safari and Chrome */
        -moz-transition: all 1s ease; /* Firefox */
        -o-transition: all 1s ease; /* IE 9 */
        -ms-transition: all 1s ease; /* Opera */
        transition: all 1s ease;

来自.abo_im img {}

以图片为中心的工作。谁能在这帮助我？

Answer 1

我找到了解决方案

我改变了这个：

-webkit-transition: all 1s ease; /* Safari and Chrome */
        -moz-transition: all 1s ease; /* Firefox */
        -o-transition: all 1s ease; /* IE 9 */
        -ms-transition: all 1s ease; /* Opera */
        transition: all 1s ease;

到这个

-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;

现在我的问题已修复。

Answer 2

问题的存在是因为您在CSS和HTML中为图像声明了width属性。只需从HTML sctructure中删除width和height声明（这不是一个好习惯）并将它们保留在CSS样式上。

所以替换这个

<img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/10313842_835925526435754_656515859635684906_n.jpg?oh=db984d372313c1c43196f940ba50091e&oe=54BE24BE&__gda__=1421758199_be055487cdfe715e945af72a57d2b2da" width="170px" height="150px">

用这个

 <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/10313842_835925526435754_656515859635684906_n.jpg?oh=db984d372313c1c43196f940ba50091e&oe=54BE24BE&__gda__=1421758199_be055487cdfe715e945af72a57d2b2da" >

图像转换不适用于以jquery图像为中心

2 个答案: