css & object-fit & background-image
object-fit
/*default fill */
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
https://www.caniuse.com/#search=object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
object-fit demo
padding-top
将 padding-top 设置成百分比，可以让一个div的高度被撑开
.three-img-other-wrap {
margin-top: 5px;
100%;
overflow: hidden;
}
.three-img-other-1 {
66.6666%;
padding-top: 66.6666%;
float: left;
border-right: 1px solid #fff;
background-size: cover;
background-position: center center;
box-sizing: border-box;
}
.three-img-other-2 {
33.3333%;
padding-top: 33.3333%;
float: left;
border-bottom: 1px solid #fff;
background-size: cover;
background-position: center center;
box-sizing: border-box;
}
.three-img-other-3 {
33.3333%;
padding-top: 33.3333%;
float: left;
background-size: cover;
background-position: center center;
box-sizing: border-box;
}
/* background-image */
<div class="three-img-other-wrap">
<div class="three-img-other-1 img-1"></div>
<div class="three-img-other-2 img-2"></div>
<div class="three-img-other-3 img-3"></div>
</div>
demo
https://codepen.io/xgqfrms/full/KKVzMEY
refs
https://css-tricks.com/almanac/properties/o/object-fit/
https://www.imooc.com/article/290537
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！