CSS: قص عرض الصورة أو ارتفاعها باستخدام CSS فقط

يمكن قص الصور ببضعة أسطر من CSS دون استخدام فوتوشوب أو أي أداة لتحرير الصور. يفيد ذلك عندما تختلف ارتفاعات الصور المصغرة في تخطيط متعدد الأعمدة، كما في المثال أدناه.

قبل

قد تؤدي الارتفاعات غير المتساوية للصور المصغرة إلى إفساد التخطيط بالكامل بسهولة.

CSS

انسخ الكود أدناه والصقه في ملف CSS.

img {
    height: 200px;
    object-fit: cover;
}

جرّب object-position: 10% 10%; إذا أردت تغيير موضع الصورة داخل مساحتها.

بعد

ستتلاءم صورك المصغرة العشرون أو الثلاثون تمامًا، ولن يبدو التخطيط غير مرتب بعد الآن. يمكن استخدام هذه الطريقة مع أي صورة منفردة في صفحتك.