移動web圖檔高度自适應的解決方案

由于圖檔的加載是在dom加載完成之後進行的，于是，在手機端浏覽網頁時，經常會看到頁面剛打開時很多内容疊在一起，當圖檔加載完成後，頁面會由于圖檔加載完成出現明顯的抖動

針對這個問題，有以下幾種解決方案

• 媒體查詢+px
• rem
• vm
• padding

媒體查詢+px

@media screen and(max - width: 320 px) {
    img {
        height: 50px;
    }
}

           

移動端裝置種類繁多，媒體查詢固然精準，但相應的是工作量的增加

rem

rem這個低調的機關随着webapp的興起，俨然成為了手機端螢幕适配的最佳方案

img {
    height: 0.5rem;
}

           

但由于rem的小數像素問題，可能會導緻1px偏差的産生，就看你是不是處女座了

vm

相對于視口的寬度或高度中較小的那個，其中最小的那個被均分為100機關的vm 算是比較完美的一個解決方案了，不過ios8以下及android4.4以下不支援

padding

padding是可以百分比取值的，詳見padding-properties（https://www.w3.org/TR/CSS2/box.html#padding-properties）

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

即取值為百分比時，計算出來的padding邊距是相對于其父元素的寬度計算的（margin類同），如下圖：

那麼，解決圖檔占位的問題就很簡單了。

頁面布局如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        overflow: hidden;
    }
    li {
        width: 50%;
        float: left;
        text-align: center;
    }
    img {
        width: 100%
    }
</style>
<ul>
    <li>
        <div class="cover">
            <img src="2222.png" alt="">
        </div>
        <div>
            文字
        </div>
    </li>
</ul>

           

這裡使用僞元素替代div充當子元素，由于padding-top使圖檔距離cover頂部100%，用相對定位到頂端。

.cover {
    position: relative;
    font-size: 0;
    display: inline-block;
    width: 100%
}
.cover img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.cover:after {
    content: '\20';
    padding-top: 100%;
    display: block;
}

           

頁面最終效果如下：

上述例子隻适用于圖檔寬高1:1的情況，對于其他比例的圖檔需要修改padding-top值，例如寬高2:1的圖檔，padding-top改為50%即可

原文位址：https://mp.weixin.qq.com/s/C0SG4m_nDWfClwdof_Ohmw