正方形

.item {
float: left;
width: 21%;
margin: 10px 2%;
height: 0;
padding-bottom: 21%;

background: red url('http://www.51nyc.com/statics/images/info/logo.png') no-repeat;
background-size: contain;
background-position: center;
}

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

HTML代码：

<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="gray" />