場(chǎng)景處理

圖片展示由瀑布流改為平鋪流，展示尺寸為280*200px，寬高比為7:5，后臺(tái)調(diào)取不同尺寸比例的圖片顯示如下：

（1）寬高比與展示寬高比一致，則圖片以展示尺寸為標(biāo)準(zhǔn)等比縮放

（2）寬高比大于7:5，則圖片自適應(yīng)展示高度，寬度居中截取圖片展示

（3）寬高比小于7:5，則圖片自適應(yīng)展示寬度，高度居中截取圖片展示

第一種方式

• html

  <div class="item-bd">
    <div class="img-box">
        <img src="http://staticqn.qizuang.com/zxgscase/20190408/FtulqB1igZ8rAaY9I2EzbCKwgv0g-w280.jpg" alt="小區(qū)名">
    </div>
    <div class="img-box">
      <img src="http://staticqn.qizuang.com/zxgscase/20190408/FsUYURMtM_UaNOQHXNO7UzOoL4Z4-w280.jpg" alt="小區(qū)名+碧生源">
    </div>
  </div>
  

• css

    * {
      margin: 0;
      padding: 0;
    }
  
    .item-bd {
      width: 280px;
      height: 200px;
      margin-top: 100px;
      margin-left:50px;
      overflow: hidden;
      position: relative;
    }
  
    .item-bd .img-box {
      width: 100%;
      height: 200px;
      overflow: hidden;
      background: #00CCFF;
      position: relative;
      z-index: 1;
    }
  
    .item-bd .img-box img {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      min-width: 100%;
      min-height: 100%;
    }
  

  第二種方式(不建議采用)

  • html

  <div class="item-bd">
    <div class="img-box" style="background: url(http://staticqn.qizuang.com/zxgscase/20190408/FtulqB1igZ8rAaY9I2EzbCKwgv0g-w280.jpg) no-repeat; background-size: cover; background-position: center;">
        <img src="" alt="小區(qū)名">
    </div>
  </div>