圖片在瀏覽器窗口水平居中的實(shí)例代碼分享

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:17:03

圖片在瀏覽器窗口水平居中的實(shí)例代碼分享

圖片在瀏覽器窗口水平居中的實(shí)例代碼分享:閑言碎語(yǔ)不多說(shuō)，直接上代碼，看看你能領(lǐng)悟到多少。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圖片在瀏覽器窗口水平居中展示（圖片尺寸不限制）</title> <

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀圖片在瀏覽器窗口水平居中的實(shí)例代碼分享:閑言碎語(yǔ)不多說(shuō)，直接上代碼，看看你能領(lǐng)悟到多少。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>圖片在瀏覽器窗口水平居中展示（圖片尺寸不限制）</title> <

閑言碎語(yǔ)不多說(shuō)，直接上代碼，看看你能領(lǐng)悟到多少。

<!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() {/*小于瀏覽器屏幕時(shí)居中 */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;
 }
 };/*滾動(dòng)定位*/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>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

圖片在瀏覽器窗口水平居中的實(shí)例代碼分享

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：圖片居中窗口

熱門(mén)焦點(diǎn)

圖片在瀏覽器窗口水平居中的實(shí)例代碼分享

圖片在瀏覽器窗口水平居中的實(shí)例代碼分享

圖片在瀏覽器窗口水平居中的實(shí)例代碼分享

最新推薦

猜你喜歡

熱門(mén)推薦