图片占位
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
更多精彩
