圖片，背景圖片的響應式布局

wzyplus 發(fā)布于2019-08-30 12:44 / 3102人閱讀

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

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

javaScript動態(tài)計算高度

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

圖片占位

根據(jù)圖片比例選取一個透明的占位圖，用來撐開父級div。里面的圖片用position：absolute定位。自適應整個盒子。

不足：額外請求一張圖片；也需要等圖片加載出來，才能撐開父級div。

padding值

利用padding取值百分比來設定高度。垂直高度的padding取百分比值的時候，是相當于其父級的寬度的。


    
        
    


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

GPU云服務器云服務器響應式布局 asp如何響應式布局 html響應式導布局圖片布局數(shù)據(jù)

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115022.html

響應式布局的實現(xiàn)

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

syoya 2019-08-30 10:55 評論0 收藏0
移動優(yōu)先的響應式布局

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

番茄西紅柿 2019-04-23 13:43 評論0 收藏0
不規(guī)則圖片列表實現(xiàn)響應式布局

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

ASCH 2019-08-01 17:26 評論0 收藏0
不規(guī)則圖片列表實現(xiàn)響應式布局

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

linkFly 2019-08-29 13:11 評論0 收藏0
CSS及布局

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

jaysun 2019-08-29 14:04 評論0 收藏0