VeryBen

用margin负值做缩略图

图片需要一个父级元素，比如把图片放在一个段落<p>标签中。段落<p>作为图片的父级元素需要是浮动的或者有固定的宽度，否者自适应宽度的父级元素是不能用这种方法实现图片缩略的。

接下来把图片的上下左右四边的margin设成负值，除此之外，我们需要用到overflow:hidden这个属性，就这样，我们要做的事情完成了。

HTML

<p class="crop">
  <a href="#"><img src="img.jpg" alt="css template" /></a>
</p>

CSS

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:1px solid #ccc;
	}
	/* input values to crop the image: top, right, bottom, left */
.crop img{
	margin:-20px -15px -40px -55px;
	}

Demo