av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

淺談圖片寬度自適應(yīng)解決方案

在網(wǎng)頁設(shè)計(jì)中，隨著響應(yīng)式設(shè)計(jì)的到來，各種響應(yīng)式設(shè)計(jì)方案層出不窮。對于圖片響應(yīng)式的問題也有很多前端開發(fā)人員在進(jìn)行研究。比較好的圖片響應(yīng)式設(shè)想便是在不同的屏幕分辨率下使用不同實(shí)際尺寸的圖片，而達(dá)到在高速網(wǎng)絡(luò)環(huán)境中使用大或超大高清圖片，在低速網(wǎng)絡(luò)或需要替用戶節(jié)省流量資源的環(huán)境中使用小而清晰的圖片，保證用戶無論在何種環(huán)境下都能有良好的瀏覽體驗(yàn)。然而這是一個龐大而具有挑戰(zhàn)的工作，我這里不做這個討論，因?yàn)槲夷壳斑€沒有這方面很好的實(shí)踐。這里我是要跟大家討論下同一張圖片在不同寬度的顯示區(qū)域中的顯示問題。

成都創(chuàng)新互聯(lián)公司專注于延長企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城建設(shè)。延長網(wǎng)站建設(shè)公司,為延長等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

問題描述

我們先來看下我想要描述的問題。首先我準(zhǔn)備了三張寬度不同的圖片，讓他們垂直排列在頁面中，除了去除圖片本身在垂直方向上產(chǎn)生的間距，不做其他任何樣式處理，這種情況我們通常在博文中經(jīng)?？吹?，在寫博文的時候經(jīng)常用到，具體效果請看：圖片寬度自適應(yīng)(1)(http://sandbox.runjs.cn/show/wxqdsnmx)。簡單看下我們的頁面結(jié)構(gòu)：

 
 
 
 
    
  
  
  
  

  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  

  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.   
    6.

為了方便查看效果，我們直接調(diào)整瀏覽器寬度來測試。測試效果如下gif圖所示： 

我們不難發(fā)現(xiàn)，在我們改變窗口可視區(qū)域的時候，圖片寬度并不會隨之變化，以至于在小屏幕中我們只能開到圖片的一部分，這是很多人所不樂見的，因?yàn)檫@極有可能會導(dǎo)致重要信息丟失。那么這個問題如何解決?

簡單嘗試

為了保證信息顯示完整，保證圖片隨可視區(qū)域?qū)挾茸兓鴮挾茸赃m應(yīng)，我直接給圖片標(biāo)簽設(shè)置了寬度100%，具體效果請看：圖片寬度自適應(yīng)(2)(http://sandbox.runjs.cn/show/enkmkdfb)。

和示例一一樣，我們還是手動改變可視區(qū)域?qū)挾葋碛^看圖片的表現(xiàn)： 

現(xiàn)在看來圖片是可以根據(jù)可視區(qū)域?qū)挾茸赃m應(yīng)了，但是問題來了：首先，所有圖片不論原始大小寬窄一律以可是區(qū)域?qū)挾葹闃?biāo)準(zhǔn)了，齊刷刷的一刀切，毫無美感;其次，當(dāng)較寬顯示區(qū)域顯示較窄圖片時，圖片出現(xiàn)嚴(yán)重失真，甚至失去識別度。好吧，窄屏的問題解決了，寬屏的問題有來了，不知道這是要鬧哪樣!但是問題出來了，我們總要想辦法去解決啊，那怎么辦呢?

兵來將擋，水來土掩

是問題，總有解決的辦法，只是成本高低的問題。對于上面這個問題我思考了許久，剛開始我想使用width: 100%;max-width: 圖片寬度; 來處理，但是，我發(fā)現(xiàn)圖片寬度并不統(tǒng)一，max-width需要針對每一個寬度去設(shè)置，那根本不可行，無疑是自找麻煩，因?yàn)閷?shí)際應(yīng)用中，我們完全無法預(yù)知用戶將使用多大寬度的圖片。所以似乎單從控制圖片樣式已經(jīng)找不到什么解決辦法了，但是我開始關(guān)注 width:100%; 的問題。

我們知道，在CSS中，寬度的百分比是是相對于父級容器寬度的。如果我們能有辦法控制圖片標(biāo)簽的父容器的寬度，那問題是不是就解決了呢?

首先，為了讓圖片標(biāo)簽有可控的父元素，我們先對代碼結(jié)構(gòu)做一點(diǎn)點(diǎn)調(diào)整：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5.
 
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •   

    好了，接下來就是如何控制img-wrap元素的寬度的問題了。我首先想到的是浮動(float)，因?yàn)槲覀冎栏釉氐膶挾仁请S內(nèi)容變化的，所以我先給img-wrap設(shè)置了如下樣式：

     
 
 
 
      
  
  
  
  
    1. .img-wrap {float: left;} 
      2.

    但是，問題又來了，浮動元素會破壞原有的布局，如果不做清除浮動處理，會導(dǎo)致后面的內(nèi)容緊跟在浮動元素之后。所以為了保證不影響其他內(nèi)容，我們還得在img-wrap外面加一個容器來控制浮動與否：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.  
      7.
     
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •   

    • 好吧，現(xiàn)在我們在來看看，被折騰成什么樣子了，圖片寬度自適應(yīng)(3)(http://sandbox.runjs.cn/show/eknk80m9) 

    哈哈，好像是我想要的效果了。但是，作為一個有點(diǎn)強(qiáng)迫癥的開發(fā)者，雖然達(dá)到了我想要的效果，但加了那么多層嵌套標(biāo)簽，總讓我感覺不舒服。于是，我繼續(xù)折騰，終于我恍然大悟， display:inline-block 的元素寬度也是隨內(nèi)容變化的，而且圖片默認(rèn)樣式恰巧也表現(xiàn)為inline-block的效果，是否可以從這里下手呢?

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.  
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.   
      18.

    結(jié)構(gòu)再度回歸到只有一層嵌套，然而css樣式卻需要調(diào)整一下：

     
 
 
 
      
  
  
  
  
    1. .img-wrap {display: inline-block;} 
      2.

    當(dāng)我，再次進(jìn)行測試的時候，心情舒暢多了，你們感受下：圖片寬度自適應(yīng)(4)。

    最后，補(bǔ)上完整的css代碼：

     
 
 
 
      
  
  
  
  
    1. .img-wrap { 
      2. 
  
  
  
  
    2. display: inline-block; 
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. .img-wrap img { 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. width: 100%; 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10. vertical-align: middle; 
      11. 
  
  
  
  
    11.  
      12. 
  
  
  
  
    12. }  
      13.

    本文標(biāo)題：淺談圖片寬度自適應(yīng)解決方案
    文章地址：http://uogjgqi.cn/article/cdcopid.html
    掃二維碼與項(xiàng)目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊