Question

所以我能找到最好的帮助让图像变焦更大一点的代码是：

onmouseover="this.width=175;this.height=75;" onmouseout="this.width=150;this.height=50"

有没有更好的替代方法让它变大，就像在你看到它而不是图像只是简单地重新调整大小？

谢谢：）

Answer 1

通过缩放图片，使用纯CSS3 transition和transform来做这件事怎么样..

Demo

div {
    position: relative;
    margin: 100px;
    height: 300px;
    width: 300px;
    border: 1px solid #515151;
}

img {
    position: absolute;
    padding: 5px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover img {
    -moz-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

您可以参考我的答案here获取跨浏览器缩放属性。

由于border {{1>，只需将元素的height正确设置为Demo（将width和310px设置为5px各方面）

使用CSS或JS缩放图像

1 个答案: