關於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);
}