قص الصورة بواسطة css

هناك عدة طرق لاقتصاص صورة في CSS ؛ ومع ذلك ، فإن أبسطها وأكثرها فعالية هي:

• استخدام ملاءمة الكائن على الصورة.
• استخدام العرض والارتفاع والتجاوز في حاوية الصورة.

.cropped {
    width: 150px; /* width of container */
    height: 150px; /* height of container */
    overflow: hidden;
    border: 5px solid floralwhite;
    border: 1px solid #ddd; /* Gray border */
    border-radius: 4px;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
}

.cropped img {
    margin: -10px 0px 0px -180px;
}

وصف الكائنات

width: 150px;	يستخدم لمقاس عرض الصورة
height: 150px;	يستخدم لمقاس طول الصورة
overflow	تستخدم لعدم الخروج من المحتوى شاهد بالاسفل
border	تستخدم لحذف التسنن ولها معاني كثيره
padding	تضبط الحاشية (padding)
margin	تستخدم لمنع تلاحم الجوانب

خاصية الـ overflow

يتم استخدام خاصية overflow والقيمة hidden عادة لعدم خروج المحتوى بعيد عن العنصر 

مثال إذا كان لديك عنصر ومحدد له نسبة الارتفاع باستخدام خاصية height وإذا استخدمت خاصية overflow والقيمة hidden في هذه الحالة لن يتم ظهور باقي المحتوى الموجود داخل العنصر إذا كان أكبر من نسبة الارتفاع سيتم اقتطاع جزء من المحتوى ولن يتم ظهوره في في الواجهة الأمامية

أما إذا استخدمت القيمة auto بدلاً من hidden في هذه الحالة سيتم عرض شريط تمرير مع الحفاظ على نسبة ارتفاع العنصر والمحتوى أي لم يتم اقتطاع أي جزء من المحتوى

شاهد الصورة التالية لتوضيح الفرق بين القيمة hidden و auto