CSS kullanarak resim kırpma için birkaç yöntem bulunmaktadır: 1. overflow Property: Bu yöntem, konteynerin boyutlarını ayarlayıp `overflow: hidden` özelliğini kullanarak resmin konteyner dışına taşan kısımlarını gizlemeyi sağlar. HTML kodu örneği: ```css .container { width: 300px; height: 200px; overflow: hidden; } .container img { width: 400px; height: auto; } ``` 2. clip-path Property: Bu özellik, resmin kırpılacağı bölgeyi tanımlamak için kullanılır ve `inset`, `circle`, `ellipse`, `polygon` gibi fonksiyonlar ve değerler alır. Örnek CSS kodu: ```css img { clip-path: circle(50%); width: 300px; } ``` 3. object-fit ve object-position: `object-fit` özelliği, resmin konteyner içinde nasıl yerleştirileceğini belirler ve `cover` değeri, resmin aspect oranını koruyarak konteynere sığmasını sağlar. Örnek CSS kodu: ```css .cropped-ofp { width: 150px; height: 150px; object-fit: cover; object-position: 25% 25%; } ``` 4. calc() ve padding-top: Bu yöntem, resmin istenen aspect oranına göre kırpılmasını sağlar. HTML ve CSS kodu örneği: ```html <div class="aspect-ratio-box"> <img src="resim.jpg"> </div> ``` ```css .aspect-ratio-box { position: relative; width: 100%; height: 0; padding-top: calc(100% (100 / 300)); } .cropped-image { position: absolute; top: 0; width: 100%; height: 100%; object