一.背景的盒子
代码:
<body><div class="box"></div><style>.box {width: 500px;height: 500px;border: 1px solid #ccc;background: url(./20191017095131790.png) no-repeat;}</style></body>
盒子的宽度和高度是500px
二.图片的大小
424X269
三.显示的效果
四.cover的效果
五.cation的效果
六.总结
1.cover沾满了这个盒子,图片显示的不完整。
2.cation 以图片的长边进行拉伸,在案例中也就是424这条边,进行拉伸,宽度也是,使图片完整显示,可能会有多余的留白。
3.区别:cover占满了整个盒子 图片显示可能不完整 ,cation图片显示的完整,可能会有多余的部分。