图片展示

场景处理

图片展示由瀑布流改为平铺流，展示尺寸为280*200px，宽高比为7:5，后台调取不同尺寸比例的图片显示如下：

（1）宽高比与展示宽高比一致，则图片以展示尺寸为标准等比缩放

（2）宽高比大于7:5，则图片自适应展示高度，宽度居中截取图片展示

（3）宽高比小于7:5，则图片自适应展示宽度，高度居中截取图片展示

第一种方式

• html

  <div class="item-bd">
    <div class="img-box">
        <img src="http://staticqn.qizuang.com/zxgscase/20190408/FtulqB1igZ8rAaY9I2EzbCKwgv0g-w280.jpg" alt="小区名">
    </div>
    <div class="img-box">
      <img src="http://staticqn.qizuang.com/zxgscase/20190408/FsUYURMtM_UaNOQHXNO7UzOoL4Z4-w280.jpg" alt="小区名+碧生源">
    </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="小区名">
    </div>
  </div>