一种让超大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图片不拉伸、全屏宽、居中显示的方法
         本页正文内容约567个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/263.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

2条评论
  1. avatar

    博客之家 Lv.2 Firefox 48.0 Firefox 48.0 Android 5.1.1 Android 5.1.1 回复

    很实用的方法。

    香港 特别行政区

    1. 小陈 Lv.6 Chrome 54.0.2840.99 Chrome 54.0.2840.99 Windows Windows 回复

      回复了博客之家:是的 表情

            湖南省张家界市 电信

00:00 / 00:00
顺序播放