مشكلة في مقاسات الصور

هذا يعتمد على الصورة التي تحاول  التعامل معها فمثلاً إذا كانت الصورة هي صورة خلفية فالأفضل ان تستخدم معها اسلوب (اخذ طول وعرض العنصر الاب وان تأخذ طريقة العرض cover) مثل :

#myImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

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

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

او يمكنك استخدام اكثر من صورة لكل من الشاشات المختلفة.

وحتى مع القيام بكل الخطوات السابقة فلن تكون الصورة كما تريدها بالضبط دائماً على كل الشاشات وستحتاج للكثير من التعديلات حتى تحصل على النتيجة التي تريدها تماماً وانت بحاجة للقيام بذلك اكثر من مرة حتى تحصل على المهارة اللازمة.

وبالعودة لسؤالك فإن كان بإمكانك مشاركة المشكلة التي تواجهها تحديداً فقط استطيع مساعدتك بشكل افضل.

لما لا تستخدم برامج مثل الفوتشوب لإنجاز الأمر أو تنفيذ ذلك من خلال CSS بتعيين طول وحجم للصورة ثم تحريك الصورة داخل العنصر لعرضها كما تريد بالجزء الذي تريده، لكن يجب تقليص حجم الصورة وحجمها أيضًا قبل استخدامها في موقعك افعل ذلك بعد أن تستقر على الصورة، وهناك أداة مثل Squoosh توفر ذلك بدلاً من استخدام الفوتوشوب.

وهناك العديد من المواقع التي توفر صور مجانية مثل freepik وغيرها:

وبخصوص تجاوب الصور:

ادارة الصور والفيديوهات في صفحات الويب