移动端巧用margin/padding的百分比实现自适应

最新推荐文章于 2024-04-15 19:17:28 发布

原创最新推荐文章于 2024-04-15 19:17:28 发布 · 562 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#自适应 #css

前端干货专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了如何利用CSS的margin/padding百分比值实现图片的完美自适应，避免使用JS，通过设置容器子元素或伪元素的padding-bottom来解决高度自适应问题，适用于不同长宽比例的图片。

写于2017-07-03，搬家至此；
今天遇到了一个曾经认为的世纪大难题----图片完美的自适应；

重要！敲黑板，划重点！！

当margin/padding取值形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！-----来自W3C标准

所以，很有必要深入研读下W3C规范；

举个栗子

要求：在每个原图长宽比例不同的情况下，实现如图的效果，且图片宽高是百分比；

前提是不使用js

我之前的错代码

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

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

结果是这样的————按照图片原始比例高度自适应的；

解决办法–设置容器的子元素或伪元素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;

}