Виявляється існує така чудова штука. Тобто у Вас є місце, наприклад під прев’ю у якомусь записі на блозі, а зображення, яке Ви бажаєте туди помістити, трохи більше самого місця.

Можна вставити його, просто задавши необхідні розміри – але буде “криво” виглядати. А можна відобразити якусь частину вихідного зображення – “обрізати”, уникнемо роботи по редагуванню у графічних редакторах, зможемо в іншому місці використати повне зображення, без збереження декількох його копій різних розмірів.

Для реалізації будемо використовувати властивість CSS – Clip.

Ось візуалізація роботи з цією властивістю:

приклад HTML коду:

<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>

та стилів до нього:

.crop{
	float:left;
	position:relative;
	width:150px;
	height:90px;
	border:1px solid #ccc;
	margin:.5em 10px .5em 0;
	}
.crop p{
	margin:0;
	position:absolute;
	top:-20px;
	left:-55px;
	clip:rect(20px 205px 110px 55px);
	}

отаким не складним способом можна робити обрізання