javascript - 使用 CSS 或 JS 缩放图像

标签 javascript html css zooming css-transitions

<分区>

所以我能找到的最好的帮助图像放大一点点的代码是:

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

是否有更好的替代方法来放大它,因为您可以看到它而不是图像,只是简单地在一个 blip 中调整大小?

谢谢:)

最佳答案

如何使用纯 CSS3 transitiontransform 通过缩放图像来做到这一点..

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,如Demo (使 heightwidth310px 因为 5px padding 在所有方面)

关于javascript - 使用 CSS 或 JS 缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20717099/

相关文章:

javascript - 在 XSL 中呈现 JavaScript

html - &lt;!DOCTYPE html> 删除媒体查询样式

html - 内联样式不在 IE7、8、9 中呈现

python - 在 Python 中将 CSV 转换为 HTML 表格

html - img下面有一个小空格

css - 在不影响周围其他 div 的情况下将文本添加到 div 列表

css - Angular - 下拉列表出现在模态下方

javascript - 将 JQuery 函数应用于自定义类类型?

javascript - 如何使用 Node.js 将 JSON 流写入文件?

javascript - 在方法中添加 HTML Javascript 事件处理