كيف اجعل المستخدم يتحكم بحجم الصورة في المتصفح؟

يمكن تنفيذ ذلك بعدّة طرق حسب بنية الصفحة لديك وإطار العمل الذي تقوم باستخدامه في كل من الجافاسكريبت و CSS، على سبيل المثال يمكنك إضافة الخاصية resizable الموجودة في jQuery كالتالي:

$(function() {
    $( "img" ).resizable();
  });

وربطها مع عنصر الصورة مع وضع التنسيقات اللازمة له، مثل تحديد عرض وارتفاع محددين

<img id="resizable" src="your_image_src" height=200px width=200px>

كما يمكنك تحديد عرض وطول أعظمي من خلال CSS لعدم تجاوزهم من قبل المستخدم أثناء التعديل.

وأيضاً يوجد حل آخر باستخدام CSS3 ولكنه غير مدعوم من قبل جميع المتصفحات:

img {
  resize: both;
  overflow: auto;
}

وطبعاً يوجد حلول أخرى في أطر العمل المختلفة ومكاتب إضافية لتنفيذ ذلك.