设为首页收藏本站
正安论坛»论坛 › 珍州生活 › 办公应用 › 如何让网页里只有一张的图片上下左右居中，任何分辨率 ...

如何让网页里只有一张的图片上下左右居中，任何分辨率

[复制链接]
天楼刀客 1楼 发表于 办公应用 2020-2-27 11:53:45 | 显示全部楼层 阅读 3879

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？注册用户

x
  1. <html>
  2.         <head>
  3.                 <meta h-t-t-p去掉--equiv="Content-Type" content="text/html; charset=GB2312" />
  4.                 <title>ECMA(草履虫)图片居中</title>
  5.                 <style>
  6.                         body{
  7.                                 margin:0px;
  8.                                 padding:0px;
  9.                                 width:100%;
  10.                                 height:100%;
  11.                         }
  12.                 </style>
  13.                 <script>
  14.                         function setmiddle(){
  15.                                 var broswer_height=document.body.clientHeight;//网页工作区的高
  16.                                 var broswer_width=document.body.clientWidth;//网页工作区的宽
  17.                                 var picture=document.getElementsByTagName("img")[0];
  18.                                 var img_width=picture.width;//图片高
  19.                                 var img_height=picture.height;//图片宽
  20.                                 position_height=(broswer_height-img_height)/2;//图像顶边距
  21.                                 position_width=(broswer_width-img_width)/2;//图像左边距
  22.                                 if(position_height<=0)//若图像超过浏览器工作区域大小的判断
  23.                                         position_height=0;
  24.                                 if(position_width<=0)
  25.                                         position_width=0;
  26.                                 picture.style.marginLeft=position_width;
  27.                                 picture.style.marginTop=position_height;
  28.                         }
  29.                        
  30.                 </script>
  31.         </head>
  32.         <body onload="setmiddle();" onresize="setmiddle();">
  33.                 <img src="h-t-t-p去掉-://cceer.xmu.edu.cn/blog/upload/show.jpg">
  34.         </body>
  35. </html>
复制代码
笔就是刀
回复

举报 使用道具

上一篇: Vlookup函数最经典的12种用法

下一篇: radmin不能发送 CTRL-ALT-DEL

全部回帖
暂无回帖，快来参与回复吧
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册用户
天楼刀客
活跃在2023-12-4
主题 261
回复 244
粉丝 13

突出表现奖章 热心参与奖章 乐于助人奖章

加好友 发私信

小黑屋|正安论坛 ( 黔ICP备17012222号 ) 贵公网安备52032402001007号

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4

快速回复 返回顶部 返回列表