طريقة استخدام float في css

السبب في ذلك هو اختلاف أحجام الصور, الصورة التي قمت بتغييرها ارتفاعها أكبر من ارتفاع الصور الاخرى ولذلك يحدث هذا الخطأ, يمكنك اعطاء عنصر img ارتفاع ثابت, لاحظ الكود التالي الذي كتبته أنت

img {
    height: 100%;
    width: 50%;
}

نريد تغيير الرتفاع ليكون كالتالي

img {
    height: 200px;
    width: 50%;
}

يمكنك اختبار الطول الذي تريده بالطبع, هكذا نضمن أحن جميع الصور سوف يكون لها ارتفاع ثابت وهو 200 بكسل

اذا كنت تريد فقط ملئ الفراغ الأبيض يمكنك تحديد الحاوية التي تحوي الصورة والنص وتعطيها ارتفاع 100%

div {
height:100%
}

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