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