App下載

bootstrap怎么使得圖片自適應(yīng)并且居中顯示？自適應(yīng)方法有哪些？

猿友 2021-06-11 11:43:59 瀏覽數(shù) (6526)
反饋

在我們的前端使用中經(jīng)常要是用到自適應(yīng)的來實現(xiàn)一些功能，那么今天我們就來說下“bootstrap怎么使得圖片自適應(yīng)并且居中顯示？自適應(yīng)方法有哪些？”這個問題吧！

1.對于這個問題我們比較常用的就是使用定位的方法來實現(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>

 我們通過簡單的將照片用盒子包裹起來，?left: 50%;?通過這個屬性將我們的圖片實現(xiàn)居中。

2.我們還可以使用背景屬性來設(shè)置圖片居中的顯示。以輪播圖為案例，代碼如下：

!-- 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>

我們先是設(shè)置盒子和放入照片。接下來進行一個背景圖設(shè)置，并且給div盒子高度。代碼如下：

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

這樣我們就完成了自適應(yīng)的使用了，但是對于針對不同的屏幕大小考慮，我們隊代碼進行修改，代碼如下：

<!-- 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;
       //根據(jù)大小為界面上的每一張輪播圖設(shè)置背景
       $('#main_ad > .carousel-inner > .item').each(function (i,item) {
          //因為獲取的是dom對象，要把DOM對象轉(zhuǎn)換成jquery對象
           var $item = $(item);
           //根據(jù)屏幕的大小來獲取不同的圖片 data()函數(shù)就是專門獲取data屬性的
           var imgSrc =
               isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
           //獲得data屬性后，給div設(shè)置背景圖片
           $item.css('backgroundImage', 'url("' + imgSrc + '")');
           // 針對移動端，尺寸需要等比例變化，所以小屏幕使用img方式 ，在div中添加img標(biāo)簽
           if (isSmallScreen){
               $item.html('<img src="'+imgSrc+'" alt="小圖"/>')
           } else{
               // 當(dāng)屏幕由小到大切換時，清空div中的img標(biāo)簽
               $item.empty();
           }
       });
   }
 
    $(window).on('resize', resize).trigger('resize');
});
總結(jié)：

通過上面的案例和講解我們就可以知道對于“bootstrap怎么使得圖片自適應(yīng)并且居中顯示？自適應(yīng)方法有哪些？”這個問題的一個解決辦法，更多的有關(guān)于bootstrap的知識和課程都可以在W3cschool中搜索學(xué)習(xí)！希望小編的分享對你有所幫助。


Bootstrap

0 人點贊