溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

bootstrap如何使得圖片自適應(yīng)并居中顯示

發(fā)布時(shí)間：2022-02-24 14:01:50 來(lái)源：億速云 閱讀：244 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“bootstrap如何使得圖片自適應(yīng)并居中顯示”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“bootstrap如何使得圖片自適應(yīng)并居中顯示”文章能幫助大家解決問(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" ></div>
	<div class="item" ></div>
	<div class="item" ></div>
	<div class="item" ></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');
});

關(guān)于“bootstrap如何使得圖片自適應(yīng)并居中顯示”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手