ممكن مساعدة بعمل ال responsive

اجعل نسب عرض وطول الصورة نسبية بدلا من وضعها نسب ثابتة

width="100%" بدلا من px

وكذلك height

كما في التعليق السابق يتم استخدام نسب مئوية ليتناسب العرض مع عرض الشاشة.

وعندما نرغب بتغيير العرض والطول معاً عند تغيير حجم الشاشة نستخدم بالإضافة لذلك height: auto ليبقى الطول متناسق مع العرض (وهو الشكل التلقائي) كالتالي:

.res-img {
  width: 100%;
  height: auto;
}

في حال أردنا من الصورة أن تزداد في الطول فقط دون أن تصبح أكبر من حجم الشاشة، نقوم بكتابة الحد الأعظمي لعرض الصورة:

.res-img {
  max-width: 100%;
  height: auto;
}

كما يمكننا وضع حد أعظمي للصورة لكي لا تتجاوزه مهما كبر بعدها حجم الشاشة، وذلك يستخدم للتعامل مع شاشات الأجهزة الكبيرة:

.res-img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

ويمكنك البحث على خصائص object-fit في CSS للتحكم بطريقة عرض الصورة نفسها.