免費(fèi)AI編程助手
在我們的前端使用中經(jīng)常要是用到自適應(yīng)的來(lái)實(shí)現(xiàn)一些功能，那么今天我們就來(lái)說(shuō)下“bootstrap怎么使得圖片自適應(yīng)并且居中顯示？自適應(yīng)方法有哪些？”這個(gè)問(wèn)題吧！
1.對(duì)于這個(gè)問(wèn)題我們比較常用的就是使用定位的方法來(lái)實(shí)現(xiàn)：代碼如下;
<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>
我們通過(guò)簡(jiǎn)單的將照片用盒子包裹起來(lái)，?left: 50%;?通過(guò)這個(gè)屬性將我們的圖片實(shí)現(xiàn)居中。
2.我們還可以使用背景屬性來(lái)設(shè)置圖片居中的顯示。以輪播圖為案例，代碼如下：
!-- Wrapper for slides 輪播的圖片 輪播項(xiàng) -->
<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>我們先是設(shè)置盒子和放入照片。接下來(lái)進(jìn)行一個(gè)背景圖設(shè)置，并且給div盒子高度。代碼如下：
#main_ad > .carousel-inner > .item{
height: 410px;
background-repeat:no-repeat;
background-position: center center;
background-size: cover;
}
這樣我們就完成了自適應(yīng)的使用了，但是對(duì)于針對(duì)不同的屏幕大小考慮，我們隊(duì)代碼進(jìn)行修改，代碼如下：
<!-- Wrapper for slides 輪播的圖片 輪播項(xiàng) -->
<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部分我們使用媒體查詢的方法；代碼如下：
/*輪播項(xiàng)*/
#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%;
}通過(guò)這個(gè)媒體查詢很好的控制了屏幕大小變化我們圖片的大小問(wèn)題。我們的 js 代碼(使用 jQuery)如下：
$(function () {
function resize() {
//獲取屏幕寬度
var windowWidth = $(window).width();
//判斷屏幕的大小
var isSmallScreen = windowWidth < 768;
//根據(jù)大小為界面上的每一張輪播圖設(shè)置背景
$('#main_ad > .carousel-inner > .item').each(function (i,item) {
//因?yàn)楂@取的是dom對(duì)象，要把DOM對(duì)象轉(zhuǎn)換成jquery對(duì)象
var $item = $(item);
//根據(jù)屏幕的大小來(lái)獲取不同的圖片 data()函數(shù)就是專門獲取data屬性的
var imgSrc =
isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
//獲得data屬性后，給div設(shè)置背景圖片
$item.css('backgroundImage', 'url("' + imgSrc + '")');
// 針對(duì)移動(dòng)端，尺寸需要等比例變化，所以小屏幕使用img方式 ，在div中添加img標(biāo)簽
if (isSmallScreen){
$item.html('<img src="'+imgSrc+'" alt="小圖"/>')
} else{
// 當(dāng)屏幕由小到大切換時(shí)，清空div中的img標(biāo)簽
$item.empty();
}
});
}
$(window).on('resize', resize).trigger('resize');
});總結(jié)：
通過(guò)上面的案例和講解我們就可以知道對(duì)于“bootstrap怎么使得圖片自適應(yīng)并且居中顯示？自適應(yīng)方法有哪些？”這個(gè)問(wèn)題的一個(gè)解決辦法，更多的有關(guān)于bootstrap的知識(shí)和課程都可以在W3cschool中搜索學(xué)習(xí)！希望小編的分享對(duì)你有所幫助。
