کیفیت و وضوح تصاویر سایت

[sara_t]

سلام

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

با سپاس

[hakim22]

به هر حال وقتی عکسها هم اندازه و یکدست نیستند نمیشه صد در صد کیفیت رو نگه داشت. راه ساده تر اینه که با css انجام بدید.

این لینک میتونه کمک کنه
https://css-tricks.com/almanac/properties/o/object-fit/

راه دیگه اینه که عکسها رو در سمت سرور برش بدید.
این مقاله تمام مراحل رو توضیح داده.
https://andrewlock.net/using-imagesharp-to-resize-images-in-asp-net-core-a-comparison-with-corecompat-system-drawing/

(https://css-tricks.com/almanac/properties/o/object-fit/)

[sara_t]

ممنون و سپاسگزار

در اینصورت اینستاگرام به چه صورت کار می کنه؟ یه قاب رو به کاربر میده که اگر عکس در اون فریم جا نشه قسمت لازم رو انتخاب کنه ولی بر چه اساس سایز بندی رو انجام میده ؟کلا تمام عکسها در اینستا (اینطور که من دیدم) بصورت یک مربع هستن که حالا اندازه های متفاوت میتونن داشته باشن مثلا 640در640 یا 604 در 604 یا 150 در 150 و ...

[hakim22]

روشهای Crop کردن زیاده. مثلا اگر عکس شما بزرگتر از سایز نمایش باشه می توانید ارتفاع عکس رو تغییر سایز بدید و گوشه های سمت چپ و راست رو حذف کنید (در CSS میشه)
یا برعکس حالت بالا چپ و راست رو به سایز ببرید و بالا و پایین رو حذف کنید. یا عکسهای کوچکتر رو زوم کرد و حاشیه هارو با رنگ سفید یا سیاه پر کرد.
همه ی اینکارهارو می توانید در CSS انجام بدید.

راهنما :
https://www.w3schools.com/css/css3_images.asp

در سمت سرور باید از ابزار جانبی استفاده کنید. فریم ورک ImageSharp قابلیتهای زیادی داره.
در اینجا داکیومنت مربوط به Crop کردن اومده .
https://docs.sixlabors.com/api/ImageSharp/SixLabors.ImageSharp.Processing.CropExtensions.htm l