روش صحیح نمایش عکس در صفحه ی وب

سلام عرض میکنم خدمت اعضای محترم انجمن
ببخشید یک سوال داشتم:

من یک
carousel
دارم که تعدادی عکس رو نمایش میده. زیر این عکس ها هم یک سری متن دارم.
مشکل اینه که وقتی کاربر عکس ها رو میبینه به دلیل اینکه ارتفاع عکس ها متغیره نوشته های زیر هم جابجا میشن هی میرن بالا هی میان پایین.
من برای رفع این مشکل به ذهنم رسید که به عکس ها
height
بدم مثلا بگم ارتفاعشون ۵۰۰ پیکسله. اما این باعث میشه که عکس ها کشییییدگی داشته باشن و خیلی زشت نمایش داده بشن.

حالا رویکرد درست چیه؟ ایا من میتونم از سرور انتظار داشته باشم که عکس هایی که برام میفرسته همه یک اندازه باشن؟
ایا باید با سی اس اس مشکل رو حل کنم؟
این عکس ها رو درواقع کاربر خودش اپلود کرده و حالا باید بتونه ببینه و کاربر ممکنه عکساش هراندازه ای داشته باشن.

خیلی ممنون بابت راهنمایی یا هرگونه لینک و فیدبک

مشکل شما اینجاس که فکر میکنید کاربر میتونی هر عکسی رو قرار بده و سرور هم کاملا هوشمنده میتونه هر کاری بکنه
شما باید تصاویر رو دقیقا توی یک سایت قرار بدید
حتی بدونی اینکه 1px بالا پایین داشته باشه
زمانی که سایت رو آپلود کردید به مشتری میگید مثلا سایز اسلایدر 750 در 300 هست

نقل قول:

---

نوشته شده توسط سعید کشاورز

مشکل شما اینجاس که فکر میکنید کاربر میتونی هر عکسی رو قرار بده و سرور هم کاملا هوشمنده میتونه هر کاری بکنه
شما باید تصاویر رو دقیقا توی یک سایت قرار بدید
حتی بدونی اینکه 1px بالا پایین داشته باشه
زمانی که سایت رو آپلود کردید به مشتری میگید مثلا سایز اسلایدر 750 در 300 هست

---

پس اگر کاربر باید سایز عکس رو مشخص کنه. چرا در سایت شیپور کاربر میتونه هرعکسی که خواست اپلود کنه؟ و این عکس ها به خوبی نمایش داده میشن؟
همین وضعیت برای سایت فیس بوک هم هست. هر عکسی رو میشه اونجا اپلود کرد و بدون هیچ کشیدگی نمایش داده میشه

سایت هایی مثل شیپور و دیوار عکس رو ریسایز نمیکنن Crop میکنن.
crop کردن عکس باعث میشه یک سری از قسمت های عکس برش بخوره
شما دارید در مورد اسلایدر صحبت میکنید. اسلایدر یعنی یک سری تصویر پشت سر هم. خب وقتی ارتفاع هر کدوم نا هماهنگ باشه مثلا پله میکنه و بالا پایین میشه
شما به سایت دیجی کالا برید و تصاویر محصولات رو ذخیره کنید. میبینید که حتی یک پیکسل بالا پایین نداره

نقل قول:

---

نوشته شده توسط سعید کشاورز

سایت هایی مثل شیپور و دیوار عکس رو ریسایز نمیکنن Crop میکنن.
crop کردن عکس باعث میشه یک سری از قسمت های عکس برش بخوره
شما دارید در مورد اسلایدر صحبت میکنید. اسلایدر یعنی یک سری تصویر پشت سر هم. خب وقتی ارتفاع هر کدوم نا هماهنگ باشه مثلا پله میکنه و بالا پایین میشه
شما به سایت دیجی کالا برید و تصاویر محصولات رو ذخیره کنید. میبینید که حتی یک پیکسل بالا پایین نداره

---

طبق گفته ی شما به سایت دیجی کالا رفتم و عکس ها رو ذخیره کردم و بله حرف شما کاملا درست بود چون تمام عکس هایی که ذخیره کردم ابعاد
500 *500 داشتن و حالا این اندازه های یکسان چطور بدست اومده؟ وقتی کاربر عکس رو اپلود میکرده سمت بک اند به ابعاد پانصد در پانصد resize شده؟

به سایت شیپور رفتم و چند عکس رو ذخیره کردم. هیچ کدام از عکس ها ابعاد یکسان نداشت. و اینکه شما میگید شیپور کراپ میکنه خلاف چیزیه که من دیدم چون من
رفتم وارد سایت شیپور شدم که یک آگهی ایجاد کنم و موقع اپلود عکس ها ازم نخواست کراپ کنم. آیا منظورتون این بود که سمت بک اند دارن عکس ها رو کراپ میکنن؟

نقل قول:

---

نوشته شده توسط سعید کشاورز

مشکل شما اینجاس که فکر میکنید کاربر میتونی هر عکسی رو قرار بده و سرور هم کاملا هوشمنده میتونه هر کاری بکنه
شما باید تصاویر رو دقیقا توی یک سایت قرار بدید
حتی بدونی اینکه 1px بالا پایین داشته باشه
زمانی که سایت رو آپلود کردید به مشتری میگید مثلا سایز اسلایدر 750 در 300 هست

---

این پست شما با پست بعدی کاملا در تناقض هست. اینجا گفتید که سرور نمیتونه کاری بکنه و فرانت اند کار باید ابعاد عکس رو برای ذخیره در پایگاه داده یکسان کنه که بتونه
موقع نمایش هم ابعاد یکسانی داشته باشه.
اما در پست بعدی گفتید که شیپور عکس ها رو کراپ میکنه که با توجه به اینکه اینکار سمت فرانت اند انجام نمیشه پس قطعا داره سمت سرور کراپ میشه.

کراپ کردن به معنی بریدن بخش هایی از عکس هست سرور از کا باید بفهمه کدوم بخش عکس مهمه که اون بخش رو برش بده؟ این اصلا با عقل جور در نمیاد که سرور کراپ کنه بدون اینکه کاربر خودش ابعاد و بخشی از عکس که میخاد کراپ کنه رو مشخص کنه که اینکار قطعا در سایت شیپور انجام نمیشه چون تمام عکس اپلود و نمایش داده میشه

با استفاده از کلاس ImageResizer که لینکش رو براتون قرار دادم، تصاویر رو بعد از اینکه آپلود شد ، تغییر اندازه بدید و بعدش ذخیره کنید

ImageResizer.cs

نقل قول:

---

نوشته شده توسط rahmatipoor

با استفاده از کلاس ImageResizer که لینکش رو براتون قرار دادم، تصاویر رو بعد از اینکه آپلود شد ، تغییر اندازه بدید و بعدش ذخیره کنید

ImageResizer.cs

---

سرور من با سی شارپ نیست اما نکته ای که از پیام شما میشه دریافت کرد این هست که تغییر اندازه ی عکس در سمت سرور انجام میشه. مثلا من خودم در پایتون با کتابخانه ی pillow
تغییر اندازه داده ام.
بعضی از سایت ها هستند که اندازه ی عکس ها را تغییر نمی دهند و باز هم بدون کشیدگی نمایش می دهند من خودم برای حل این مشکل از
https://www.w3schools.com/css/css3_object-fit.asp
استفاده کردم هرچند گمان می کنم هنوز پاسخ نهایی را نیافته ام و امیدوارم افرادی که تجربه ای در این زمینه دارند روزی چشمشون به این تایپیک بیفته و راهنمایی کنند