现在的位置: 首页php>正文
rss
一种让超大banner图片不拉伸、全屏宽、居中显示的方法
2016年10月21日 php 评论关闭 ⁄ 被围观 5,627 次+

现在很多网站的banner图片都是全屏宽度的,这样的网站看起来显得很大气。这种banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分。实现方法如下:

  1. <html>
  2. <head>
  3. <title>title</title>
  4. <style>
  5. .bannerbox{
  6. width:100%;
  7. position:relative;
  8. overflow:hidden;
  9. height:500px;
  10. }
  11. .banner{
  12. width:1920px;/*图片宽度*/
  13. position:absolute;
  14. left:50%;
  15. margin-left:-960px;/*图片宽度的一半*/
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <divclass="bannerbox">
  21. <divclass="banner">
  22. <imgsrc="t1.jpg">
  23. </div>
  24. </div>
  25. </body>
  26. </html>

把css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小,然后 .banner 中margin-left 的值改成banner图宽度的一半即可。

本文地址:/16/1257.html
如非注明则为本站原创文章,欢迎转载。转载请注明转载自:moon's blog
 

抱歉!评论已关闭.