وهذا هو الكود html :

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

وهذا هو الستايل css:

[html] .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;
}
[/html]

التقنية الثانيه: استخدام الموضع المطلق

اذا كنت لا تشعر بالرضا مع التقنيه الأولي فعليك أن تقوم باستخدام هذه التقنيه وهي تحديد العرض والإرتفاع للصوره المراد وضعها في محتواك.

html كود يكون بهذا الشكل:

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

css ستايل شيت يكون بهذا الشكل:

[html] .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;
}
[/html]

التقنيه الثالثه: إستخدام خاصية clip
هذا الأسلوب يحدد حجم العناصر المراد وضعها في مختواك وتكون مرئيه. فإنك تقوم بحساب حجم المنطقه المرئيه من العنصر وعلي هذا الأساس يكون سهلا عليك اقتصاص الحجم الذي تريدهفهو يحتفظ بالحجم الأصلي ويدخل الي اليسار ليحدد المنطقه المرئيه من الصوره

وهذا هو كود الـ html:

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

وهذا هو الcss تبعها:

[html] .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);
}
[/html]

طبعا هذه الطريقه تعطي نتيجه واحده وهذا يبرهن لك أنك تمتلك خيارات متعدده وطرق كثيره لتنفذ ما يخطر بذهنك مع css