zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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


  • 相关阅读:
    CoreLocation
    通知(NSNotificationCenter)
    加载xib文件
    UITextField
    UIButton
    UILabel
    UIAlertController
    layoutSubviews
    Java AQS详解(转)
    Java中synchronized
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13096844.html
Copyright © 2011-2022 走看看