css笔记之图片显示效果

图片显示之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模式显示时,应该这样写:

//完全内联:


//选择器+内联(实际项目中用得多)


.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;
}

TODO 如果要实现centerInside效果:?