在學習如何利用CSS建立響應式圖片前，我們要先了解一下什么是響應式圖片。響應式圖片是用戶代理根據(jù)輸出設備的分辨率不同加載不同類型的圖片，不會造成帶寬的浪費。同時，在改變輸出設備類型或分辨率時，能及時加載對應類型的圖片。

    就現(xiàn)在的HTML5已經(jīng)有很多響應式圖片技術(shù)了，他們的復雜性需要不同水平的瀏覽器支持。

    復雜的方式實現(xiàn)響應圖像的一個例子是使用srcset屬性，它需要多個映像，更多的標記和一個新的HTML屬性的依賴現(xiàn)代瀏覽器之外的不是很好。

    相比之下用CSS來創(chuàng)建的方法就相對比較簡單了。它只依賴CSS width和height屬性，這意味著該方法將工作在幾乎所有的瀏覽器和設備。然而這將要求網(wǎng)頁設計的布局是一個流體/響應布局。

    下面您將看到幾個變化的響應式圖片技術(shù)在本教程中所討論，但是基本概念還是相同的都是使用CSS給圖像percentage-length單元（或任何相對長度單位如，ems）和width，然后給他們height屬性的值auto（自動）。

    img {
        width: 100%;
        height: auto;
        }

    基本的響應式圖片，讓我們先從一個基本的例子。

    我們有一個 div的容器 <img>元素。

    HTML

    <div class="container">
      <img src="image01.jpg" width="960" height="640" />
    </div>

    容器有一個width財產(chǎn)的96%左右的利潤。它有一個max-width：960 px的布局不太寬的大屏幕上的 <img>在容器有一個元素width為100%，這樣它的寬度總是等于它的容器不管視窗的大小從而使其響應，它的height被設置為auto這樣圖像比例尺度。

    CSS

    div.container {
                  width: 96%;
                  max-width: 960px;
                  margin: 0 auto; /* to center the container */
                  }
    img {
         width: 100%;
         height: auto;
        }

    注意：<img>元素將會響應即使它給出了固定寬度和高度HTML標記（即屬性，width="960" height="640"）。這是偉大的因為它意味著該技術(shù)適用于遺產(chǎn)通過HTML內(nèi)容，有固定的尺寸。

    響應圖像列

    有時我們想讓圖片在列中并排顯示。例如圖像畫廊通常在一個網(wǎng)格顯示縮略圖。

    實現(xiàn)響應式圖片列，我們唯一要做的就是改變降低CSS width和給 <img>一個元素display屬性值的inline-block。

    讓我們討論一些布局方案：兩列布局和形象三列圖像布局。

    1、兩列響應圖像布局。

    兩列反應圖像的布局，我們可以設置CSS width為48%或大約一半的容器。之所以不設置為50%是因為給圖像利潤率。

    HTML

    <div class="container">
      <img src="image01.jpg" width="960" height="640" />
      <img src="image02.jpg" width="960" height="640" />
    </div>

    CSS

    img {
         width: 48%;
         display: inline-block;
        }

    2、三列的響應圖像布局。

    對于一個三列的響應圖像布局，這個概念是相同的我們只需要設置width大約為三分之一的容器的寬度為32%。

    HTML

    <div class="container">
      <img src="image01.jpg" width="960" height="640" />
      <img src="image02.jpg" width="960" height="640" />
      <img src="image03.jpg" width="960" height="640" />
    </div>

    CSS

    .three-columns {
                    width: 32%;
                    display: inline-block;
                   }

    圖像與條件斷點，它是個好主意響應條件斷點的圖像顯示在列，當圖片太小，列將會崩潰。我們需要媒體查詢來實現(xiàn)這一點。在接下來的例子中，響應式圖片將顯示在智能手機一列、兩列在平板電腦上、大屏幕上四列。

    HTML

    <div class="container">
       <img src="image01.jpg" width="960" height="640" />
       <img src="image02.jpg" width="960" height="640" />
       <img src="image03.jpg" width="960" height="640" />
       <img src="image04.jpg" width="960" height="640" />
    </div>

    CSS

    /* For small devices (e.g. smartphones) */
    img {
         max-width: 100%;
         display: inline-block;
         }
    /* For medium devices (e.g. tablets) */
    @media (min-width: 420px) {
    img {
         max-width: 48%;
        }
       }
    /* For large devices (e.g. desktops) */
    @media (min-width: 760px) {
      img {
          max-width: 24%;
          }
         }

    寬屏圖像響應，有響應的圖像總是100%的視窗的大小，我們只需要刪除容器的max-width(960 px)和給它一個width的100%。

    .container {
                width: 100%;
               }
    img {
         width: 100%;
        }

    盡管這響應式圖片技術(shù)是易于使用和具有良好的瀏覽器支持，其缺點是它總是為全尺寸的圖片。這意味著大型、高分辨率圖像仍將提供給用戶即使他是在小型移動設備，不能利用的全部尺寸和分辨率的圖像。如果你想有條件地提供不同版本的相同的圖像就要改善移動網(wǎng)絡性能，看看srcset和或?qū)傩詧D像元素。

    (轉(zhuǎn)載請注明轉(zhuǎn)自：m.gafsjz.com/news/n1540.htm，謝謝!珍惜別人的勞動成果，就是在尊重自己!）