关于img标签的处理

0x00 写在最前

    目前网页并没有一个完美的img解决方案，若需要完美按照要求显示图片可以使用ps或者裁剪图片来实现；

0x01 图片自适应

    将父元素div加入以下代码

	display:flex;
	align-items:center; 
	justify-content:center;

    img水平填充

width:100%
height:auto;

    img垂直填充

width:auto;
height:100%;

0x02 css裁剪

    首先设置图片html时设置width或height，让图片按比例缩小；//假如这次的图片是400*300

<img src="150113-4.jpg" height="100px"/> 

    然后在css中设置以下属性（img的容器）

width:100px;
height:100px;
overflow:hidden;
position: relative;

0x03 clip裁剪

    将img设置绝对定位就可以使用clip裁剪了

img {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
}