图片显示之centerCrop模式
怎么样实现android的imageView的各种拉伸和裁剪效果:比如最常用的centerCrop模式
img标签局限性很大,无法配置各种裁剪显示效果,默认情况下,,然后在img标签中,如果指定了img标签具体的长宽值,图片会拉伸或压缩全部塞入标签中,类似于android中的fitXY模式.
.slider-img{
width: 7rem;
height: 3.9rem;
}
1.png
如果用背景图片的形式来显示图片,上面的设置则是 图片以本身的像素大小显示在屏幕中,从标签区域左上角往下显示,图片不会拉伸也不会缩小,不会去管填没填满,还是太大.
2.png
要显示全图,并实现centerCrop模式,则需要添加如下设置:
background-position: center center;
background-size: 100% ;
3.png
如果是小图片,则会等比放大,然后裁剪
4.png
总结
要让一张图片以类似于android中ImageView的centerCrop模式显示时,应该这样写:
//完全内联:
<div style="width:100px;height:100px;background:url(//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg) no-repeat center center">
//选择器+内联(实际项目中用得多)
<div class="slider-img" style="background-image:url('../../imgs/activity/icon_card.png')"></div>
.slider-img{
width: 7rem;
height: 3.9rem;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% ;
}
fitXY效果:应以img标签的形式显示,并指定宽高:
.img-fitxy{
width: 7rem;
height: 3.9rem;
}
