جلسه ۸۰ – aspect ratio در CSS

آشنایی با aspect ratio
آموزش طراحی سایت

مفهوم aspect ratio در CSS به چه معناست؟ چطور می‌تونیم توسط aspect ratio، خطای سئویی CLS رو تا حد امکان کاهش بدیم؟ چطور aspect ratio باعث بهبود تجربه کاربری در صفحه وب سایت ما میشه؟

مفهوم aspect ratio

در حالت کلی، aspect ratio به نسبت عرض به ارتفاع یک عکس یا به صورت کلی تر، یک container اشاره میشه.

برای درک بهتر، به تصویر زیر توجه کنین:

همونطور که میبینیم، می‌تونیم aspect ratio یا “نرخ دیداری” رو با یک ” : ” بین عرض و ارتفاع container نمایش بدیم. مثال بالا یک تصویر با aspect ratio ی 3:4 داریم و هرچقدرم بزرگ یا کوچیکش کنیم، aspect ratio مورد نظر تغییری نمیکنه.

نکته: عبارت نرخ دیداری، یه ترجمه دلخواهه و کاملا صحیح نیست. چون aspect ratio در فارسی معادل مناسبی نداره. ولی اگه دوست داشتین می‌تونین از همین عبارت استفاده کنین!

aspect atio می‌تونه در پلتفرم های مختلف، در اندازه ها و مقادیر  مختلفی استفاده شه. برای مثال در اینستاگرام، aspect ratio مناسب برابر با 8:10 هست، و در پلتفرم  youtube با aspect ratio ی 16:9 طرف هستیم.

با تمام این ها، هیچ عبارتی تحت عنوان “بهترین aspect ratio” وجود نداره. به خصوص در عکاسی که aspect ratio هر عکس، می‌تونه متناسب با موضوع اون عکس متفاوت باشه.

کاربرد aspect ratio در طراحی وب سایت

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

اما برای اینکه یک توسعه دهنده وب خوب باشیم، حتما لازم نیست کلی تکنولوژی متفاوت بلد باشیم! گاهی از یک سری میانبر ها و مهارت ها غافل میشیم که ارزششون میتونه بالاتر از یادگیری یک کتابخونه یا فریمورک خاص باشه!

یکی از این مهارت ها، نحوه استفاده از aspect ratio در CSS هست. aspect ratio کاربرد های بسیاری داره که از اون ها میشه به موارد زیر اشاره کرد:

  • ساختن container های کاملا واکنش گرا، که بخوایم هم ارتفاع و هم عرض محتوا داخل  container متناسب با ابعاد viewport تغییر کنه.
  • استفاده از aspect ratio برای جلوگیری از خطای cls
  • ساختن فضایی برای عکس ها (عکس هایی که ابعاد متفاوتی با هم دارن)

در مورد هر کدوم از این موارد میشه کلی صحبت کرد. ما در مورد کاربرد اول و دوم که خیلی مهمن صحبت میکنیم و کاربرد سوم رو که به نسبت ساده تره به خودتون میسپاریم.

نحوه استفاده از aspect ratio در CSS

اما از aspect ratio چطور میشه تو CSS استفاده کرد؟

اولین  فایده aspect ratio، همونطور که تو بخش قبلی گفته شد، طراحی container هایی هست که متناسب با تغییر ابعاد صفحه، نه تنها عرض،بلکه ارتفاعشون هم تغییر می‌کنه.

تو CSS به دو شکل می‌تونیم این کار رو انجام بدیم:

استفاده از متود قدیمی padding-top

متود اول که یک مقدار هم مربوط  به گذشتست، استفاده از padding-top هست.

اول از همه به containerمون یک عرض واکنش گرا (برحسب واحد های وابسته) اختصاص میدیم. سپس از اونجایی که container ما ارتفاع نداره، به جای استفاده از height ثابت، از padding-top بر حسب درصد استفاده می‌کنیم. این درصد، بر اساس عرض container ما خواهد بود. در ساده ترین حالت، کد ما به فرم زیر هست:

<div></div>
div{
   width:100%;
   padding-top: 75%;
}

حالا چرا 75%؟ این مقدار، نشون دهنده نسبت ارتفاع به عرض container ما خواهد بود. به صورت خلاصه برای padding-top داریم:

 

  • برای aspect ratio ی 1:1 = padding-top برابر 100% خواهد بود.
  • برای aspect ratio ی 4:3 = padding-top برابر 75% خواهد بود.
  • برای aspect ratio ی 3:2 = padding-top برابر 66.67% خواهد بود.
  • برای aspect ratio ی 16:9 = padding-top برابر 56.25% خواهد بود.

به مثال زیر توجه کنین:

36873

همونطور که میبینیم، با کاهش دادن عرض صفحه، ارتفاع container هم رو به کاهش میزاره.

اما این روش یک سری مشکلات داره. مهم ترینشون اینه که در این روش، برای قرار دادن محتوا داخل container حتما باید از روش هایی مثل خاصیت relative استفاده کنیم، چرا که بخاطر padding-top، محتوا میچسبه به کف container ما!

برای حل این مشکل، متود جدید تری به نام خاصیت aspect ratio به وجود اومده.

استفاده از خاصیت aspect ratio در CSS

استفاده از این خاصیت، به نسبت خاصیت قبل بهینه تر و ساده تره. خاصیت aspect-ratio، مستقیما مقادیر مورد نظرمون رو میپذیره:

aspect-ratio: [نسبت عرض به ارتفاع]

برای استفاده از این خاصیت، کافیه به container مورد نظرمون یک width مناسب اختصاص بدیم و سپس، از خاصیت aspect-ratio استفاده کنیم:

<div></div>
div{
   width:100%;
   aspect-ratio: 3/4;
}

ناگفته نمونه که این روش، برخلاف padding-top تاثیری روی مکان محتوای درونی container نداره و به سادگی می‌تونین با اون محتوا کار کنین.

نکته: این خاصیت فعلا در مرورگر های معدودی ساپورت میشه و کار میکنه، بنابراین اگه دیدین کد رو زدین و کاری نکرد تعجب نکنین. نه تقصیر شماست و نه تقصیر این مثال! برای دیدن لیست مرورگر هایی که از این خاصیت حمایت می‌کنن می‌تونین به وب سایت caniuse مراجعه کنین.

حواستون باشه که: اگه جایی از مطالب براتون نامفهوم و گنگ بود، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین که یاریتون کنیم 🙂

نقش aspect ratio در جلوگیری از خطای CLS

یکی از  کاربرد هایی که بررسی کردیم، نقش aspect ratio در جلوگیری از خطای CLS بود. اینکه این خطا چی هست رو می‌تونین تو مقاله خطای CLS میزفا که پوریای عزیز زحمتشو کشیده مطالعه کنین.

بعد از اینکه با خطای CLS تا حد مبتدی و مناسبی آشنا شدیم، برمی‌گردیم اینجا که ببینیم چطور aspect ratio می‌تونه از این خطا جلوگیری کنه؟

استفاده از aspect-ratio برای اندازه دهی به container هایی که یه مقدار لود شدنشون طول می‌کشه (مثل container های حاوی عکس و ویدیو) می‌تونه مفید باشه و اجازه نده که یهو مثل اجل معلق! سر از وسط محتوای متنی دربیارن.

به این شکل که یک placeholder یا جایگاه براشون میسازه که در صورت لود شدن، به صورت کاملا طبیعی و بدون بهم زدن جایگاه بقیه عناصر و محتوا ها، ظاهر بشن.

برای این منظور، کافیه به محتوای مورد نظرمون، خاصیت aspect-ratio رو اختصاص بدیم:

<img src="house.jpg" alt="house">
img{
   width: 50%;
   aspect-ratio: 3/4;
}

پایان ترم

 

سوال:

آیا با متود padding-top که گفتیم هم میشه خطای cls رو برطرف کرد؟ سرچ کنین و نتیجش رو تو قسمت نظرات بنویسین.

نکته: به هیچ عنوان خودتون رو به سرچ فارسی محدود نکنین. سرچ فارسی عالیه! ولی تنها انتخاب ما نیست.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

 

نتیجه گیری

تو این مقاله، با مفهوم aspect ratio آشنا شدیم و دیدیم که چطور می‌تونیم یک عنصر کاملا ریسپانسیو، چه از لحاظ height و چه width داشته باشیم.

روش استفاده از padding-top و خاصیت aspect ratio رو بررسی کردیم و در نهایت، دیدیم که چطور این خاصیت می‌تونه از خطای cls جلوگیری کنه.

اگه نکته‌ای، پیشنهادی و یا انتقادی در رابطه با نوشته ها دارین، خیلی خیلی خوشحال می‌شیم که تو قسمت دیدگاه های پایگاه دانش میزفا اون رو ارسال کنین.

مدیر محتوا: علی اسماعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

بدون نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=