跨浏览器图像预览效果

约书亚记32

我试图使用JavaScript创建图像预览效果,该效果将打开在全屏模式下单击的所有图像。图像本身使用以下代码根据其大小居中。

CSS | 查看全部| 结果

position: fixed;
top: 50%;
left: 50%;

简体Javascript | 查看全部| 结果

el.style.margin = "-" + el.height / 2 + "px -" + el.width / 2 + "px";

该代码在Firefox中可以正常运行,但是在Webkit浏览器中,图像被推到左上角,并且具有模糊的负边距。为什么此Javascript在Webkit浏览器中不起作用?我应该如何解决此代码?

伊瑟伍德
popupImage.style.margin = "-" + popupImage.clientHeight / 2 
    + "px -" + popupImage.clientWidth / 2 + "px";

参见https://stackoverflow.com/a/623174/1264804

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

跨浏览器静止图像相机捕获

来自分类Dev

跨浏览器无法选择/无法拖动的图像

来自分类Dev

在svg到png图像的浏览器转换中(包括IE的跨浏览器)

来自分类Dev

跨浏览器登录?

来自分类Dev

跨浏览器问题?

来自分类Dev

GetUserMedia跨浏览器?

来自分类Dev

3D CSS效果(最大的跨浏览器兼容性)

来自分类Dev

浏览器 mimetype 预览支持

来自分类Dev

在Flask上投放页面时,如何在浏览器中上传图像预览?

来自分类Dev

如何在单个浏览器窗口中预览目录中的所有图像?

来自分类Dev

设置页面滚动跨浏览器

来自分类Dev

Chrome中的跨浏览器实例

来自分类Dev

跨浏览器图例居中

来自分类Dev

Error.stackTraceLimit跨浏览器

来自分类Dev

跨浏览器功能标识

来自分类Dev

跨浏览器可编辑跨度

来自分类Dev

跨浏览器平滑滚动?

来自分类Dev

HTML / CSS的跨浏览器优化

来自分类Dev

跨浏览器字体大小

来自分类Dev

跨浏览器差异被阻止

来自分类Dev

跨浏览器CSS Transistion

来自分类Dev

设置页面滚动跨浏览器

来自分类Dev

HTML / CSS的跨浏览器优化

来自分类Dev

跨浏览器的文本倒置

来自分类Dev

CSS跨浏览器代码

来自分类Dev

如何指示Chrome浏览器下载PDF而不是在浏览器中预览(预览)?

来自分类Dev

跨浏览器问题:首次加载后,Firefox无法从php文件加载图像

来自分类Dev

如何使用CSS内容跨浏览器将HTML文本替换为图像

来自分类Dev

跨浏览器的图像解压缩的一致性如何?