bootstrap如何使得图片自适应并居中显示

这篇文章主要介绍"bootstrap如何使得图片自适应并居中显示"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"bootstrap如何使得图片自适应并居中显示"文章能帮助大家解决问题。

1.对于这个问题我们比较常用的就是使用定位的方法来实现：代码如下;

我们通过简单的将照片用盒子包裹起来，left: 50%;通过这个属性将我们的图片实现居中。

2.我们还可以使用背景属性来设置图片居中的显示。以轮播图为案例，代码如下：

!-- Wrapper for slides 轮播的图片 轮播项 -->
        
        
        
        

我们先是设置盒子和放入照片。接下来进行一个背景图设置，并且给div盒子高度。代码如下：

#main_ad > .carousel-inner > .item{height: 410px;background-repeat:no-repeat;background-position: center center;background-size: cover;}

这样我们就完成了自适应的使用了，但是对于针对不同的屏幕大小考虑，我们队代码进行修改，代码如下：

在css部分我们使用媒体查询的方法；代码如下：

/*轮播项*/#main_ad{ } #main_ad > .carousel-inner > .item{     background-repeat:no-repeat;    background-position: center center;    background-size: cover;}@media (min-width: 768px) {    #main_ad > .carousel-inner > .item{        height: 410px;    }}#main_ad > .carousel-inner > .item > img{    width:100%;}

通过这个媒体查询很好的控制了屏幕大小变化我们图片的大小问题。我们的 js 代码(使用 jQuery)如下：

$(function () {   function resize() {       //获取屏幕宽度       var windowWidth = $(window).width();       //判断屏幕的大小       var isSmallScreen = windowWidth < 768;       //根据大小为界面上的每一张轮播图设置背景       $('#main_ad > .carousel-inner > .item').each(function (i,item) {          //因为获取的是dom对象，要把DOM对象转换成jquery对象           var $item = $(item);           //根据屏幕的大小来获取不同的图片 data()函数就是专门获取data属性的           var imgSrc =               isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');           //获得data属性后，给div设置背景图片           $item.css('backgroundImage', 'url("' + imgSrc + '")');           // 针对移动端，尺寸需要等比例变化，所以小屏幕使用img方式 ，在div中添加img标签           if (isSmallScreen){               $item.html('')           } else{               // 当屏幕由小到大切换时，清空div中的img标签               $item.empty();           }       });   }     $_(window).on('resize', resize).trigger('resize');});

关于"bootstrap如何使得图片自适应并居中显示"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。