css & object-fit & background-image

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;
      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>

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 发布文章使用：只允许注册用户才可以访问！

---