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

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

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

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

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

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

    基本的響應(yīng)式圖片，讓我們先從一個(gè)基本的例子。

    我們有一個(gè) div的容器 <img>元素。

    HTML

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

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

    CSS

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

    注意：<img>元素將會(huì)響應(yīng)即使它給出了固定寬度和高度HTML標(biāo)記（即屬性，width="960" height="640"）。這是偉大的因?yàn)樗馕吨摷夹g(shù)適用于遺產(chǎn)通過(guò)HTML內(nèi)容，有固定的尺寸。

    響應(yīng)圖像列

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

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

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

    1、兩列響應(yīng)圖像布局。

    兩列反應(yīng)圖像的布局，我們可以設(shè)置CSS width為48%或大約一半的容器。之所以不設(shè)置為50%是因?yàn)榻o圖像利潤(rùn)率。

    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、三列的響應(yīng)圖像布局。

    對(duì)于一個(gè)三列的響應(yīng)圖像布局，這個(gè)概念是相同的我們只需要設(shè)置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;
                   }

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

    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%;
          }
         }

    寬屏圖像響應(yīng)，有響應(yīng)的圖像總是100%的視窗的大小，我們只需要?jiǎng)h除容器的max-width(960 px)和給它一個(gè)width的100%。

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

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

    (轉(zhuǎn)載請(qǐng)注明轉(zhuǎn)自：mjyil.cn/news/n1540.htm，謝謝!珍惜別人的勞動(dòng)成果，就是在尊重自己!）