<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                # 響應式圖片 響應式 web 設計意味著,不僅我們的布局能基于設備特征變化,內容也能。比如,高分辨率 (2x) 顯示屏上,就需要高分辨率圖片保證清晰度。當瀏覽器寬 800px 時,一張 50% 寬度的圖片或許很適合,但在一個局促的手機上,則會占用太多空間,另外,縮小圖片來適應小屏幕時,耗費的帶寬支出卻是一樣的。 ![](https://box.kancloud.cn/7dda509a28a7ad473a1bbf7731dc8216_1200x655.png) 其余時候,圖片也許需要更大幅度的修改:更改比例,裁剪甚至更換整張圖片。 ## 傳統解決方案 固定寬度,像素完美的網站設計已經離我們遠去了。在寬屏顯示器,互聯網電視,多尺寸的平板電腦和智能手機的今天,我們的設計必須應付一切可能,將寬由320px向7680px轉變。 伴隨這種多分辨率風景而至的,是需要拉伸或收縮圖像,以適應這些不同的要求。這可以被理解為如下問題,矢量圖形出現異常時,絕大多數具有特定像素的圖像寬度并不改變。 所以,我們應該怎么做呢? 作為一般規則,你會在任何響應式網站中發現以下CSS樣式: img{ max-width:100%; height:auto; } 此代碼使用max-width:100%的設置,以確保圖像永遠不會超越其父容器的寬度。如果父容器的寬度收縮小于圖像的寬度,圖像將隨之縮小。height:auto的設置可以確保當有這種情況發生時,圖像將以自身的寬高比保留。 ![](https://box.kancloud.cn/5380b23d8a822b86e2b192ff1579eb9a_600x500.png) 這解決了一方面的問題,使我們能夠在許多不同的情況下顯示相同的圖像。不過,這并不能讓我們對不同的情況指定不同的圖像。 ## 使用HTML5中的picture元素處理響應式圖片 <picture>是HTML5一個新的元素。 如果<picture>元素與當前的<audio>和<video>元素協同合作將大大增強響應式圖像的工作進程。它允許你放置多個source標簽,以指定不同的圖像文件名,進而根據不同的條件進行加載。 它可以讓你根據以下條件加載完全不同的圖像: * 媒體特性結果如:視口的當前高度(viewport height),寬度(width),方向(orientation)。 * 像素密度 反過來這也意味著您可以: * 加載適當大小圖像的文件,使可用帶寬得到充分利用。 * 加載不同裁剪并具有不同縱橫比的圖像,以適合于不同寬度的布局變化。 * 加載更高的像素密度,顯示更高分辨率的圖像。 ![](https://box.kancloud.cn/a7f0c858c63457b8a20be9c522ae98be_600x500.png) ## picture元素的工作原理 <picture>基本工作步驟如下: * 創建<picture></picture>標簽。 * 在這些標簽內創建一個你想用來執行任何一個特性的<source>元素。 * 添加一個media屬性,用來包含你想要的特性,如視口的當前高度(viewport height),寬度(width),方向(orientation)等。 * 添加一個srcset屬性與相應的圖像文件名相匹配,進行加載。如果你想提供不同的像素密度,例如Retina顯示屏,你可以添加額外的文件名到你的srcset屬性中, * 添加一個回退的<img>元素。 可以看個簡單的例子,用來檢查視口是否小于768px,如果小于就加載一個較小的圖像: <picture> <source srcset="person_small.jpg" media="(max-width: 768px)"> <source srcset="person_default.jpg"> <img srcset="person_default.jpg" alt="This is King"> </picture> 可以看到在屏幕<=768px的時候加載的是person_small.jpg ![](https://box.kancloud.cn/d3d89e0b27b7e91d78b3164dc5594ca2_500x750.jpg) 當屏幕>768px的時候,加載的是person_default.jpg ![](https://box.kancloud.cn/9c86b7d394abc93dc78031b13175a7a2_1152x1728.jpg) 當瀏覽器不支持picture元素的時候,使用img標記加載元素。 你可能會注意到,在media屬性使用的語法與創建CSS媒體特性中使用的語法一樣。您可以使用相同的特性,這意味著你可以查詢max-width,min-width,max-height,min-height,orientation等屬性。 同時,您也可以使用這些特性判斷設備的方向,從而加載橫向或縱向版本的圖像,同時您也可以進行大小特性的混合。例如: <picture> <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)"> <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)"> <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)"> <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)"> <img srcset="default_landscape.jpg" alt="My default image"> </picture> 上面的代碼實現了可以在一個小的景觀設備上加載小的,景觀裁剪圖像的版本。在大的景觀設備上加載大的相同的圖像版本。 這樣,在小尺寸的小型設備上,或在大尺寸的大型設備上,該設備可以自主進行圖像主導從而加載不同圖像剪裁的版本。 如果您想為更高密度的顯示器提供不同分辨率的圖像版本,可以通過在srcset屬性中添加額外的文件名來實現。例如,讓我們來看看屏幕像素密度為2x的Retina 代碼處理片斷: ## picture元素的兼容性 可以看到caniuse上picture元素的兼容性: ![](https://box.kancloud.cn/39294b8259feda908a227f651279ceb0_2172x628.png) 現在,Chrome,Firefox和Opera瀏覽器都已經實現了對<picture>元素的支持。在不久的將來,在其他瀏覽器也將得到廣泛的支持。但現在這一時刻還沒有來臨。 與此同時,如果你現在就想使用<picture>元素可能還需要等待。你也可以使用[Picturefill2.0](http://scottjehl.github.io/picturefill/);Filament 成員提供的一個polyfill。 ![](https://box.kancloud.cn/c04170fea9e8eb10889dc1e22b0baa08_1866x1048.png) 通過下載并添加picturefill.js文件到您項目的頭部就可以實現: <script src="picturefill.js"></script> 還有你可以通過異步加載腳本來增加效率,你可以參考Picturefill的文檔。 有了這個腳本加載,除了少數的限制,<picture>元素將如我所講的運行。 但是需要注意: Picturefill在其他的IE版本都可以正常工作,但是IE9卻不能識別被包裹在picture標簽中的source元素。為了解決這個問題,在video標簽內包住你的源元素,這就會使他們在IE9中被識別,例如: ~~~ <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="person_small.jpg" media="(max-width: 768px)"> <source srcset="person_default.jpg"> <!--[if IE 9]></video><![endif]--> <img srcset="person_default.jpg" alt="This is King"> </picture> ~~~ 和IE9一樣,Android 2.3識別不了在picture元素中source元素。然而,在使用常規的img標簽時,它就可以識別srcset屬性。為了避免在Android 2.3及任何有相同問題的其他瀏覽器中出現此問題,確保在srcset屬性中存在默認用于回退的img元素的文件名。 ## 參考資源 * [responsiveimages響應式圖片](http://responsiveimages.org/demos/) * [picturefill](http://scottjehl.github.io/picturefill/) * [srcset demo](https://webkit.org/demos/srcset/)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看