使用padding百分比进行比例布局,原理是容器padding/margin的百分比参照物是父元素的宽度,容器width默认的参照物也是父元素的宽度。
.th-image-container {
width: 100%;
height: 0;
padding-bottom: 60%;
overflow: hidden;
}
.th-image-cover{
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.th-card-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;;
}