[轉]一種讓超大banner圖片不拉伸、全屏寬、居中顯示的方法
阿新 • • 發佈：2017-09-29
posit code overflow 都是 flow cnblogs width banner 圖片
現在很多網站的Banner圖片都是全屏寬度的，這樣的網站看起來顯得很大氣。這種Banner一般都是做一張很大的圖片，然後在不同分辨率下都是顯示圖片的中間部分。實現方法如下：
<html> <head> <title>Title</title> <style> .bannerbox { width:100%; position:relative; overflow:hidden; height:500px; } .banner { width:1920px; /*圖片寬度*/ position:absolute; left:50%; margin-left:-960px; /*圖片寬度的一半*/ } </style> </head> <body> <div class="bannerbox"> <div class="banner"> <img src="t1.jpg"> </div> </div> </body> </html>
把css中 .bannerbox 中 height 及 .banner 和 width 換成你banner圖的大小，然後 .banner 中margin-left 的值改成banner圖寬度的一半即可。
[轉]一種讓超大banner圖片不拉伸、全屏寬、居中顯示的方法