bootstrap怎么使得图片自适应并且居中显示？自适应方法有哪些？

在我们的前端使用中经常要是用到自适应的来实现一些功能，那么今天我们就来说下“bootstrap怎么使得图片自适应并且居中显示？自适应方法有哪些？”这个问题吧！

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

<html lang="en">
	<head>
		<title>Title</title>
		<style>
			* {
				margin: 0 auto;
			}
			.bannerbox {
				position: relative;
				overflow: hidden;
				height: 410px;
			}
			.banner {
				width: 2000px;
				/*图片宽度*/
				position: absolute;
				left: 50%;
				margin-left: -1000px;
				/*图片宽度的一半*/
			}
		</style>
	</head>
	<body>
		<div class="bannerbox">
			<div class="banner">
				<img src="img/slide_04_2000x410.jpg">
			</div>
		</div>
	</body>
</html>

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

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

!-- Wrapper for slides 轮播的图片 轮播项 -->
<div class="carousel-inner" role="listbox">
	<div class="item active" style="background-image: url('img/slide_01_2000x410.jpg')"></div>
	<div class="item" style="background-image: url('img/slide_02_2000x410.jpg')"></div>
	<div class="item" style="background-image: url('img/slide_03_2000x410.jpg')"></div>
	<div class="item" style="background-image: url('img/slide_04_2000x410.jpg')"></div>

</div>

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

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

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

<!-- Wrapper for slides 轮播的图片 轮播项 -->
<div class="carousel-inner" role="listbox">
    <div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
</div>

在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('<img src="'+imgSrc+'" alt="小图"/>')
           } else{
               // 当屏幕由小到大切换时，清空div中的img标签
               $item.empty();
           }
       });
   }
 
    $(window).on('resize', resize).trigger('resize');
});

总结：

通过上面的案例和讲解我们就可以知道对于“bootstrap怎么使得图片自适应并且居中显示？自适应方法有哪些？”这个问题的一个解决办法，更多的有关于bootstrap的知识和课程都可以在W3cschool中搜索学习！希望小编的分享对你有所帮助。