前端css复习（4）-img

img和link就是一个很普通的开放性tag，所以可以不具备有</img> </link>

  一、格式

  一般写img也就是 <img class="xxx" src="file-path"> 

  二、图片兼容问题

  想要保证图片在变换大小的时候不会随意的被拉扯变形，最好设置一个参数：{object-fit:cover;}

这个部分自己练习的时候想查看容器大小，建议用border-width: 2px;border-style:solid;

         cover：就是保证在容器范围内尽可能多的覆盖图片面积

         contain：保证图片保持最开始的比例不会变形，但是不保证填满容器尺寸

         none：相比于不设置这个参数，是做了一点割舍工作，但是不多

         fill：如同字面意思，但不是很好的选择

如果是{object-position: xx xx}这个就是开始让容器在图片表面开始漂移了

  xx:可以用% px em来作为结尾变量哦

 如果我们将 object-position 设置为 20% 40%，这意味着图像左边 20% 的垂直线与内容框左边     20% 的垂直线重合，图像顶部40% 的水平线与内容框顶部40%的水平线重合

如果直接设置为object-position:left这种，先比较是容器大，还是图片大，然后个人理解为小的开始运动（之后有误会进行修正）

.thumbnail{
  width:278px;
  height: 158px;
  object-fit: cover;
  object-position:left;
  border-width: 2px;
  border-color: red;
  border-style: solid;
}