如何讓圖片自適應不同屏幕寬度，並居中顯示。

我們在瀏覽網站的時候發現，很多網站的banner圖片都是全屏寬度。這種圖片都是在不同分辨率下都是顯示圖片的中間部分，這裏我們介紹兩種方式，

第一種就是常見的方式，用定位

我簡單定義爲三部曲：
- 讓包裹圖片的盒子絕對定位，
- left:50%,
- Margin-left：圖片寬度的一半
看例子吧：

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

第二種方式，讓圖片做背景圖，利用背景圖的background-position:center center的屬性實現圖片居中顯示

既然讓圖片自適應不同的屏幕，也就是說不光是pc端還有移動端。那我就根據一個例子詳細介紹一下。這裏我們用bootstrap框架做一個輪播效果圖，來實現圖片在不同屏幕下的圖片的響應式效果。

對bootstrap封裝好的代碼進行改進。我們重點修改了輪播圖片的內容。
一步一步來介紹：

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

我們給div設置好背景圖之後，由於沒有給div設置高度，背景圖是看不到的。所以做如下調整：

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

簡單解釋一下：background-size
因爲我們要考慮 :萬一我們的背景圖片沒有410的高度，圖片有可能只是居中展示一小塊，所以用background-size去控制一下。
語法：background-size: length|percentage|cover|contain;

值	描述
length	設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置爲 “auto”。
percentage	以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置爲 “auto”。
cover	把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain	把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

這樣就可以讓圖片自適應了，但是還是不夠的，爲什麼呢。我們要知道：
實現圖片響應式的目的是：各種終端都需要正常顯示圖片；移動端應該使用更小的圖片，小指體積
如果我們用手機端去訪問我們的頁面，那麼就需要把圖片下載到本地，這就要需要流量用戶肯定希望流量越少越好啊。如果下載了超大的圖，其實是並不需要的，那豈不是浪費很多流量。那我們就希望針對不同的屏幕使用不同的圖片，大屏幕用大圖，小屏幕呢就是用小圖
針對pc端圖片自適應（因爲pc端也有不同尺寸的屏幕），針對移動端就做一個單獨的圖片。
解決思路：
當屏幕的尺寸發生變化的時候，我們獲取一下屏幕的寬度，當屏幕的寬度小於一定的值我們就認爲是手機屏幕，就顯示小圖；大於一定尺寸就認爲是pc端使用大圖。
但是一開始就不能顯示圖片吧，圖片應該動態加載圖片。div在某種狀態顯示某種圖片，應該根據div的屬性去展示吧這就用使用data-屬性，data屬性專門記錄與div相關的屬性
代碼修改爲:

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

需要小圖的時候，尺寸等比例變化，所小圖時使用img方式,在div中添加img標籤。同時當使用小圖的時候，父盒子的高度就不爲410px了，這可以用媒體查詢的方式控制盒子的高度。
當圖片不足以撐滿整個盒子時，圖片的寬度爲100%
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%;
}

data-屬性並不起作用，僅僅是記錄數據的。當要顯示圖片時，用js腳本在不同屏幕下顯示不同的圖片尺寸。
js代碼（這裏用的是jquery）：

/**
 * Created by Administrator on 2017/6/28.
 */
'use strict'
$(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');
});

完整html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>輪播圖</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<!--廣告輪播-->
<div id="main_ad" class="carousel slide" data-ride="carousel">

    <!-- Indicators活動指示器 下面的小圓點 -->
    <ol class="carousel-indicators">
        <li data-target="#main_ad" data-slide-to="0" class="active"></li>
        <li data-target="#main_ad" data-slide-to="1"></li>
        <li data-target="#main_ad" data-slide-to="2"></li>
        <li data-target="#main_ad" data-slide-to="3"></li>
    </ol>
    <!-- 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>



    <!-- Controls 控制 左右的控制按鈕-->
    <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>


</div>

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script> <!--我們自己寫的js-->
</body>
</html>

ok，通過以上方式就可以實現圖片的居中顯示併產生響應式效果。

diligentkong

發佈了77 篇原創文章 · 獲贊 114 · 訪問量 36萬+

私信關注

如何讓圖片自適應不同屏幕寬度，並居中顯示。

第一種就是常見的方式，用定位

第二種方式，讓圖片做背景圖，利用背景圖的background-position:center center的屬性實現圖片居中顯示

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

Java基礎 -------反射機制

Spring入門之Spring IOC和DI 理解原理

Mybatis入門之 resultMap的映射關係

JavaScript原型和閉包之---爲對象添加屬性和方法以及in 、delete關鍵字（一）

webstorm中LESS環境的搭建

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結