图片占位

1.使用padding-top百分比

.pt_2_item {

　　width: 50%;

　　position: relative;

　　float: left;

　　padding: 3px;

}

.pt_2_in {

　　padding-top: 100%;

}

.pt_2_pic {

　　width: 100%;

　　background: #ddd;

　　position: relative;

}

.pt_2_in img {

　　position: absolute;

　　width: 100%;

　　height: 100%;

　　top: 0px;

　　left: 0px;

}

.pt_2_text {

　　position: absolute;

　　bottom: 0px;

　　width: 100%;

　　background: rgba(0, 0, 0, 0.5);

　　color: #fff;

}

<div class="pt_1">

　　<div class="pt_2">

　　　　<div class="pt_2_item">

　　　　　　<div class="pt_2_pic">

　　　　　　　　<div class="pt_2_in">

　　　　　　　　　　<img src="http://files01.jianshendeyu.com//uploads/8e0c38c5-3683-490b-8ef0-a251ab4d141f/20190424/0f3af61b-c6c4-4032-a399-ac88faa24fac.jpg"/>

　　　　　　　　</div>

　　　　　　　　<div class="pt_2_text">22222</div>

　　　　　　</div>

　　　　　　<div>111</div>

　　　　　　<div>111</div>

　　　　</div>

　　</div>

</div>

 

2.使用vw

.pt_2_item {

　　width: 50%;

　　float: left;

}

.pt_2_pic {

　　width: 48vw;

　　height: 48vw;

　　background-color: #ddd;

　　margin: 0 auto;

}

.pt_2_pic img {

　　width: 100%;

　　height: 100%;

}

<div class="pt_1">

　　<div class="pt_2">

　　　　<div class="pt_2_item">

　　　　　　<div class="pt_2_pic">

　　　　　　　　<img src="http://files01.jianshendeyu.com//uploads/8e0c38c5-3683-490b-8ef0-a251ab4d141f/20190424/0f3af61b-c6c4-4032-a399-ac88faa24fac.jpg"/>

　　　　　　</div>

　　　　　　<div>1111</div>

　　　　　　<div>2222</div>

　　　　</div>

　　</div>

</div>

2.使用rem

转载于:https://www.cnblogs.com/yuyedaocao/p/10857628.html