• 转载 | 一种让超大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图宽度的一半即可

    附:

    1. 使用相对定位

    html代码

    <div class="wrap">

        <div class="banner"><img src="img1.jpg"/></div>

    </div>

    css代码

    .wrap{100%;overflow:hidden;}

    .banner{1920px;margin-left:-960px;left:50%;position:relative;}

    效果

    超大图居中的方法

    超大图居中的方法

    2.使用绝对定位

    html代码

    <div class="bannerbox">

            <div class="banner">

                <img src="img1.jpg">

            </div>

        </div>  

    css代码

     .wrap { 100%;position:relative; overflow:hidden; height:470px; }

    .banner {1920px;position:absolute;  left:50%; margin-left:-960px;}

    效果

    超大图居中的方法

  • 相关阅读:
    Python基础实例001:数字组合问题
    Python集合
    标量、向量、矩阵、张量
    re模块函数之search
    Python常用字符串操作
    Python基础之元组
    Bai, IEEE 2019
    词嵌入
    RNN 训练时梯度爆炸和梯度消失的理解
    OCR 综述
  • 原文地址:https://www.cnblogs.com/One-sprite/p/7390163.html
Copyright © 2020-2023  润新知