时间:2021-07-01 10:21:17 帮助过:24人阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片在浏览器窗口水平居中展示(图片尺寸不限制)</title> <style> * { margin: 0; padding: 0; background: #606060} html { height: 100%; } body { position: relative; min-height: 100%; } #img-center { width: 800px; margin: 0 auto; display: block; margin-top: 2%; margin-bottom: 2%; cursor: zoom-in; }</style> <script>window.onload = function() {/*小于浏览器屏幕时居中 */var docuH = document.body.clientHeight, domH = document.getElementById("img-center").offsetHeight, dom = document.getElementById("img-center");if(domH < docuH) {var csstext = "position:absolute;top:50%;margin-left:-400px;left:50%;margin-top:-" + domH / 2 + "px;"; dom.style.cssText = csstext; } };/*滚动定位*/function bbimg(o) {var zoom = parseInt(o.style.zoom, 10) || 100; zoom += event.wheelDelta / 12;if(zoom > 0) o.style.zoom = zoom + '%';return false; }</script> </head> <body> <img src="img/3.jpg" alt="" id="img-center" onmousewheel="return bbimg(this)"> </body> </html>
以上就是图片在浏览器窗口水平居中的实例代码分享的详细内容,更多请关注Gxl网其它相关文章!