长方形图片,显示在正方形框内

原创 Been101 随笔 css 221阅读 2017-12-16 14:13:55 举报

需求
1、图片在正方形框内显示,图片的形状不固定,要居中显示在正方形的框内。图片的宽和高,哪个值大,以谁为准撑满正方形框。
解决方法:
1、js 方法 解决。判断的高和宽谁的值大,把谁设置成100%;(相对麻烦)
2、css 方法 解决。把图片作为背景图显示
background:url( "yourImage.png") no-repeat center center ;
background-size:contain; ( 图片的宽和高,哪个值大,以谁为准撑满正方形框。)

延伸比较
background-size:contain; ( 图片的宽和高,哪个值大,以谁为准撑满正方形框。能显示出完整的图片,会有空白区)
background-size:cover; ( 长方形图片,以宽为准撑满正方形框。高出的部分不能显示出来,没有空白区)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复