图片展示

场景处理

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

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

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

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

第一种方式

• html

• 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