ابتدا یک ویرایشگر مناسب را بازکنید و کدهای زیر را درون آن قرار دهید . با استفاده از کد زیر یک تصویر را با کلاس مشخص شده فراخوانی میکنیم .
<p><a href=”http://iranhex.com” title=”Css Templates”><img src=”img.jpg” alt=”css template” /></a></p>
حالا کدهای CSS زیر را به کلاس مرتبط شده به عکس می دهیم .
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #000;
width:206px;
height:149px;
}
.crop img{
position:absolute;
top:-88px;
left:-41px;
}
به همین راحتی ! حالا شما با استفاده از ۲ دستور Height و Width اندازه ناحیه Crop شده را تعیین کنید و با استفاده از دستورات Top و Left منطقه قرارگیری آن را تنظیم کنید . امیدوارم مفید واقع شود .