zoukankan      html  css  js  c++  java
  • bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中

    视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕。比如

    这样一张图片,

     为了图片自适应设置width=100%,在宽1920px下显示效果是这样的

    显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕。

    后来想了想。有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性background-size。就开始对轮bootstrap播组件进行小的修改。

    //弃用item类下的img标签,用div代替,图片以背景图片的形式在css中引入,并为其设置
    	 100%;
    	height: 100%;
            background-size: contain;    
    

      以上代码效果是这样的

    内容全部显示了,但图片在大屏幕下没有居中。这个简单,那就给div设置background-position:cenetr吧

                 100%;  //div自适应父级宽度
                height: 100%;  //div自适应高度
                background-size: contain;  //不能使用cover,
                background-repeat: no-repeat;  
                background-position: center;  //图片居中

    最终效果:图片在任何分辨率下,都能自适应显示全部内容。

  • 相关阅读:
    逐级汇总示例(循环逐级累计法).sql
    UdtSsn.cs
    2013届大华股份 软件算法类试题 D卷
    TCP与UDP区别
    浙江大华 研发类试题
    百度面试经历
    Contiki入门学习
    09网易校园招聘笔试题
    (转载)利用webkit抓取动态网页和链接
    2012.9.23 搜狗笔试
  • 原文地址:https://www.cnblogs.com/lijinwen/p/6055763.html
Copyright © 2011-2022 走看看