溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“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如何使得圖片自適應并居中顯示”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
