前端固定框时图片显示效果

不通尺寸的图片在固定宽高比框下显示效果比较

四张不通宽高比的图片

1. 图片1 1600*2023
2. 图片2 768*340
3. 图片3 960*600
4. 图片4 800*800

四张图片在固定宽高150*200展示

1. 样式代码

.img-center {
    width: 200px;
    height: 150px;
    margin: 20px;
    overflow: hidden;
    position: relative;
}

.img-center img {
    display: block;
    position: absolute;
}
/**
按宽填满，高缩放
*/
.img-center img.aspectFill-x {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
/**
按高填满，宽缩放
*/
.img-center img.aspectFill-y {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

2. 显示分类

var item;	//固定显示框dom
var img; //当前图片元素dom
var itemW = item.offsetWidth;
var itemH = item.offsetHeight;
var itemR = itemW / itemH;
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
var imgR = imgW / imgH;
var resultMode = null;
switch (mode) {
     case 'aspectFill':
         resultMode = imgR > 1 ? 'aspectFill-x' : 'aspectFill-y';
         break;
     case 'wspectFill':
         resultMode = itemR > imgR ? 'aspectFill-x' : 'aspectFill-y'
         break;
     default:
 }
 $(img).addClass(resultMode);

• 缩略图展示在固定宽高情况下通过缩放优先展示照片全貌长边优先铺满
  此时mode=“aspectFill”，这种情况下w/h > 1的图宽铺满，高缩放；w/h < 1的图高填满，宽缩放
  显示效果如下
  
  
  
  
• 放大显示优先铺满短边短边显示完整，长边只能截取显示
  显示效果如下
  
  
  
  

固定高宽下图片显示两种方式

**注：长短边指的是比例上的，如itemR>imgR，则图片的宽是比例上的短边

• 缩略图显示，优先铺满长边，优点是可以显示图片全貌，缺点是图片展示大小不一
• 局部放大展示，优先铺满短边，优点时可以具有放大效果，图片展示大小相同，缺点图片不全