成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

圖片，背景圖片的響應(yīng)式布局

wzyplus / 3045人閱讀

摘要：對(duì)于圖片布局來(lái)說(shuō)，如果高度自適應(yīng)的話，一開始父級(jí)高度為，需要等圖片加載完成之后，才能撐開父級(jí)，這樣會(huì)對(duì)整體布局有影響，存在閃動(dòng)效果，用戶體驗(yàn)不佳。動(dòng)態(tài)計(jì)算高度對(duì)全屏顯示的圖片，根據(jù)圖片寬高比動(dòng)態(tài)計(jì)算出圖片的高度，賦值給父級(jí)。

網(wǎng)頁(yè)布局，如全屏輪播等，或者其他需要根據(jù)寬高等比縮放的圖片。對(duì)于圖片布局來(lái)說(shuō)，如果高度自適應(yīng)的話，一開始父級(jí)高度為0，需要等圖片加載完成之后，才能撐開父級(jí)div，這樣會(huì)對(duì)整體布局有影響，存在閃動(dòng)效果，用戶體驗(yàn)不佳。而且會(huì)影響js計(jì)算模塊高度的等問(wèn)題。

javaScript動(dòng)態(tài)計(jì)算高度 
對(duì)全屏顯示的圖片，根據(jù)圖片寬高比動(dòng)態(tài)計(jì)算出圖片的高度，賦值給父級(jí)div。
這一方法有種，殺雞焉用牛刀的感覺(jué)。
圖片占位

根據(jù)圖片比例選取一個(gè)透明的占位圖，用來(lái)?yè)伍_父級(jí)div。里面的圖片用position：absolute定位。自適應(yīng)整個(gè)盒子。

不足：額外請(qǐng)求一張圖片；也需要等圖片加載出來(lái)，才能撐開父級(jí)div。

padding值

利用padding取值百分比來(lái)設(shè)定高度。垂直高度的padding取百分比值的時(shí)候，是相當(dāng)于其父級(jí)的寬度的。


    

        
    




css:
.wrap{
    position: relative;
    margin: 5% 10%;
    border: 1px solid #ccc;
 }
 .wrap:before{
     content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
 }
 .img_box{
     position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
 }
 .img_box img{
    max-width: 100%;
    height: auto;
    width:100%;
    vertical-align: top;
  }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115022.html

相關(guān)文章

  • 響應(yīng)式布局的實(shí)現(xiàn)

    摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁(yè)的不同展示方式?？蚣軐?shí)現(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡(jiǎn)單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個(gè)柵欄，也就是一半。 響應(yīng)式布局的概念 響應(yīng)式布局，即 Responsive design，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁(yè)的不同展示方式。通過(guò)響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏...

    syoya 評(píng)論0 收藏0

  • 移動(dòng)優(yōu)先的響應(yīng)式布局

    摘要：雖然兼容性方案的體驗(yàn)不如常規(guī)方案，但保證了功能可用性移動(dòng)優(yōu)先的響應(yīng)式布局采用的是漸進(jìn)增強(qiáng)原則，制作響應(yīng)式網(wǎng)站時(shí)，先搞定手機(jī)版，然后再去為更大設(shè)備去設(shè)計(jì)和開發(fā)更復(fù)雜的功能。前面的話 　　隨著移動(dòng)互聯(lián)網(wǎng)的興起，不同設(shè)備的分辨率相差較大，如果在不同的設(shè)置上顯示同一個(gè)頁(yè)面，則用戶體驗(yàn)差。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是一種方法，使得一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不用為每個(gè)終端制作特定的版本。它使得一個(gè)網(wǎng)站可以在任何類...

    番茄西紅柿 評(píng)論0 收藏0

  • 不規(guī)則圖片列表實(shí)現(xiàn)響應(yīng)式布局

    摘要：優(yōu)點(diǎn)在于響應(yīng)式布局非常方便，都是按照比例進(jìn)行的縮放，弊端是在于如果圖片不規(guī)則，那么圖片變形是難免的。一次布局多終端友好 技術(shù)開發(fā)和實(shí)際運(yùn)營(yíng)總是有很大差別的，比如常見的圖片列表，一般設(shè)計(jì)圖上都是固定尺寸大小的，但是實(shí)際操作起來(lái)并沒(méi)有太多人去ps修剪圖片到知道的尺寸，大部分都是差不多比例的圖片就直接上傳了，為了解決不規(guī)則圖片列表展示問(wèn)題有相應(yīng)的解決方案例如瀑布流，或者相冊(cè)等，但是對(duì)于多終端...

    ASCH 評(píng)論0 收藏0

  • 不規(guī)則圖片列表實(shí)現(xiàn)響應(yīng)式布局

    摘要：優(yōu)點(diǎn)在于響應(yīng)式布局非常方便，都是按照比例進(jìn)行的縮放，弊端是在于如果圖片不規(guī)則，那么圖片變形是難免的。一次布局多終端友好 技術(shù)開發(fā)和實(shí)際運(yùn)營(yíng)總是有很大差別的，比如常見的圖片列表，一般設(shè)計(jì)圖上都是固定尺寸大小的，但是實(shí)際操作起來(lái)并沒(méi)有太多人去ps修剪圖片到知道的尺寸，大部分都是差不多比例的圖片就直接上傳了，為了解決不規(guī)則圖片列表展示問(wèn)題有相應(yīng)的解決方案例如瀑布流，或者相冊(cè)等，但是對(duì)于多終端...

    linkFly 評(píng)論0 收藏0

  • CSS及布局

    摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...

    jaysun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<