这篇文章主要介绍“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" ></div>
<div class="item" ></div>
<div class="item" ></div>
<div class="item" ></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如何使得图片自适应并居中显示”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注天达云行业资讯频道,小编每天都会为大家更新不同的知识点。