Css kullanarak resimlerin ebatlarında değişiklik yapabiliriz.Orantılı olarak küçültme işlemi dışında kesme işlemide yapabiliriz.

Teknik 1 (Eksi margin Yöntemi)

Bu yöntemde eksi margin değeri verek gizlediğimiz kısımlar dışındaki alanların gösterilmesi sağlanır.Nekadar eksi değer verirseniz o kısım okadar kesilir.

Kullanım şekli

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

Css kodu

.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;
	}

Demoya buradan bakabilirsiniz.

Teknik 2 (Absolute Position Yöntemi)

Kullanım şekli

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

Css kodu

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	position:relative; /* this is important too */
	border:1px solid #ccc;
	width:150px;
	height:90px;
	}
.crop img{
	position:absolute;
	top:-20px;
	left:-55px;
	}

Demoya buradan bakabilirsiniz.

Teknik 3 (Clip kesme özelliği)

Kullanım şekli

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

Css kodu

.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);
	}

Makale için yapılan aramalar

• css arka plan kesme