移動端巧用margin/padding的百分比實現自適應

weixin_33890499發表於2018-06-15
padding

寫於2017-07-03，但是發現簡書比個人網站省力氣得多，遂搬家至此；
今天遇到了一個曾經認為的世紀大難題----圖片完美的自適應；

重要！敲黑板，劃重點！！

當margin/padding取值形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！-----來自W3C標準

所以，很有必要深入研讀下W3C規範；

舉個栗子

要求：在每個原圖長寬比例不同的情況下，實現如圖的效果，且圖片寬高是百分比；

前提是不使用js

3981371-88ca3c4d0265a255.png
image.png

我之前的錯程式碼

<li>
      <img src="">
      <img src="">
      <img src="">
</li>

li{
   width:100%;
}
li img {
    width: 32%;
    float: left;
    margin-right: 2%; 
}

結果是這樣的————按照圖片原始比例高度自適應的；

3981371-736177182d47962b.png
image.png

解決辦法--設定容器的子元素或偽元素padding-bottom/top

使用margin/padding的百分比值來解決自適應高度的關鍵在於：

容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，倆屬性參照物一致，那麼想要把這倆屬性的值統一起來就很簡單了；

給img加一個div父容器，用百分比給div一個寬，高則給父容器的偽元素padding-bottom的百分比來佔位。容器做好之後，img用相對定位top:0;left:0;width:100%;height:100%填滿整個div就ok了。經測試，直接給父容器加padding-bottom百分比也可以，但是加在偽元素上更好；

<li>
     <div class="flex-pic">
            <img src="">
     </div>
     <div class="flex-pic">
            <img src="">
     </div>
     <div class="flex-pic">
            <img src="">
     </div>
</li>


li{
    width:100%;
}
li  .flex-pic{

    width: 32%;

    float: left;

    margin-right: 2%; 

    margin-top: 8px;

    position: relative;

    z-index: 2;

    overflow:hidden; 

    background:center center no-repeat;

}

.flex-pic:before{

    content: "";

    display:inline-block;

    padding-bottom:75%;

    width: 100%;

    pointer-events: none;

    z-index: -1;    

}

.flex-pic img{

    width:100%; 

    height:100%; 

    position:absolute;

    top: 0;

    left: 0;

}

總結

自適應的精髓在於寬度，margin/padding設定百分比彌補了元素高度無法自適應地與元素寬度保持一致的缺陷；

版權宣告：本文原創，轉載請註明出處 https://www.jianshu.com/p/289ef32a2348

相關文章