<分区>
所以我能找到的最好的帮助图像放大一点点的代码是:
onmouseover="this.width=175;this.height=75;" onmouseout="this.width=150;this.height=50"
是否有更好的替代方法来放大它,因为您可以看到它而不是图像,只是简单地在一个 blip 中调整大小?
谢谢:)
<分区>
所以我能找到的最好的帮助图像放大一点点的代码是:
onmouseover="this.width=175;this.height=75;" onmouseout="this.width=150;this.height=50"
是否有更好的替代方法来放大它,因为您可以看到它而不是图像,只是简单地在一个 blip 中调整大小?
谢谢:)
最佳答案
如何使用纯 CSS3 transition
和 transform
通过缩放图像来做到这一点..
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
,如Demo (使 height
和 width
为 310px
因为 5px
padding
在所有方面)
关于javascript - 使用 CSS 或 JS 缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20717099/