css object-fit background-image background-size background-image background-position



css & object-fit & background-image

object-fit

/*default fill */
object-fit: fill|contain|cover|scale-down|none|initial|inherit;


 ​

css & object-fit & background-image_background-size

object-fit demo

See the Pen <a href="https://codepen.io/xgqfrms/pen/YzqEQEa">object-fit</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

padding-top

将 padding-top 设置成百分比，可以让一个div的高度被撑开


.three-img-other-wrap {
margin-top: 5px;
width: 100%;
overflow: hidden;
}

.three-img-other-1 {
width: 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 {
width: 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 {
width: 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>



css & object-fit & background-image_background-position_02

See the Pen <a href="https://codepen.io/xgqfrms/pen/KKVzMEY">css 图片居中处理</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

demo

 ​

 

 ​


​​ ​​



xgqfrms