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;  //图片居中

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

  • 相关阅读:
    javascript 数字时钟
    ubuntu下键盘背景灯光设置
    使用百度地图SDK
    ListView 的Item状态改变和保存
    继续Jsoup 正方教务系统的教学质量评价一键好评
    Java下的可视化开发工具使用 WindowBuilder Pro
    js 数组排序
    js数组去重
    js call() apply()
    [总结] js的2种继承方式详解
  • 原文地址:https://www.cnblogs.com/lijinwen/p/6055763.html
Copyright © 2011-2022 走看看