خب حالا خیلی سریع بهتون نشون بدم که چطور
می‌تونیم به عناصر اندازه بدیم
در سی‌اس‌اس با استفاده از ویژگی‌های ارتفاع و عرض
و دوباره بیایم از عنصر کناری این پایین شروع کنیم
که بعداً به نوار کناری ما تبدیل میشه
پس نباید به این اندازه عریض باشه
و در عوض ما می‌خوایم فقط ۵۰۰ پیکسل عرض داشته باشه
پس می‌تونیم خیلی راحت بیایم اینجا سراغ عنصرمون
و عرض رو مشخص کنیم
به اندازه ۵۰۰ پیکسل
و به همین سادگی
حالا عنصر کناری ما فقط ۵۰۰ پیکسل عرض داره
و خیلی باریک‌تر از بقیه بخش‌های صفحه‌ست
خب؟ خیلی آسون و سرراست
این شد ویژگی عرض
بیاید یکی دیگه رو امتحان کنیم
خب حالا ارتفاع رو امتحان کنیم
و این کار رو توی سرصفحه اصلی انجام می‌دم
پس اینجا ارتفاع رو بذاریم روی ۸۰ پیکسل
خیلی خب
و حالا دیدید که اینجا ارتفاعش بیشتر شد درسته؟
بیاید حالا این سرصفحه رو بررسی کنیم
نه فقط لینک بلکه کل عنصر سرصفحه درسته؟
و اگه پایین قسمت مدل جعبه رو نگاه کنیم
خب همه‌چیز یکم کوچیکه
ولی اشکالی نداره
اینجا می‌بینید که دقیقاً همون ۸۰ پیکسلی
که مشخص کردیم وجود داره
و علاوه بر اون
۲۰ پیکسل بالا و ۲۰ پیکسل پایین هم داریم
پس در نهایت اندازه واقعی
عنصر درواقع فقط همون ۸۰ پیکسل نیست
بلکه میشه ۸۰ به اضافه
۲۰ و ۲۰ که جمعاً میشه ۱۲۰ پیکسل
و این دقیقاً همون رفتار پیش‌فرض
مدل جعبه‌ست که قبلاً گفتم
که به نظر من اصلاً منطقی نیست
ولی خب بعداً اینو درستش می‌کنیم
فعلاً مهمه که
یاد بگیریم مدل جعبه در اصل چطور کار می‌کنه
پس دوباره ارتفاع واقعی این عنصر فقط ۸۰ نیست
که اینجا مشخص کردیم بلکه باید
پدینگ بالا و پایین رو هم بهش اضافه کنیم خب؟
یه چیزی که احتمالاً اینجا هم دیدید اینه که
محتوا یعنی متن اینجا
به‌طور جادویی وسط‌چین عمودی نمیشه داخل
این سرصفحه
درواقع قبلاً وسط‌چین عمودی بود
ولی دلیلش این بود که پدینگ مساوی برای بالا و پایین
اعمال کرده بودیم
اما الان دیگه اینطور نیست
یعنی هنوز پدینگ مساوی داریم برای بالا و پایین
اما الان ارتفاع بیشتری داریم
و در نتیجه فضایی که
پایین ایجاد شده دیگه مثل فضای بالایی نیست
و درواقع خیلی راحت نیست که
متن رو عمودی وسط‌چین کنیم
ولی خب بعداً یاد می‌گیریم چطور این کار رو انجام بدیم
خب بیاید اینو ببندیم
و حالا بیاید بالاخره در مورد این تصویر حرف بزنیم
تا اینجای کار همینطور بدون تغییر مونده بود
ولی حالا بیاید انتخابش کنیم و بهش اندازه بدیم
و برای این کار یه کلاس بهش بدیم
که بعداً بتونیم انتخابش کنیم
پس همین تصویر اینجاست
خب بذاریم اسم کلاس رو تصویر-پست بذاریم
کپی‌اش کنید
و بعد خب بذاریمش
یه جایی همین پایین صفحه
چون این بخش فقط یه دمو بود پس اینجا می‌ذارمش
و حالا بیاید عرضش رو مشخص کنیم
خیلی رایجه که تصاویر رو در سی‌اس‌اس اندازه‌گذاری کنیم نه
در اچ‌تی‌ام‌ال مثل کاری که کردیم
درواقع خیلی وقت‌ها اصلاً عرض تصاویر رو
در اچ‌تی‌ام‌ال مشخص نمی‌کنیم فقط در سی‌اس‌اس
خب اینجا برای اولین بار
من دیگه از واحد پیکسلی استفاده نمی‌کنم
یعنی می‌تونستم بکنم فعلاً
بذاریمش روی ۸۰۰ پیکسل
خب ولی انگار تصویر اشتباهی رو انتخاب کردیم
پس کلاس باید روی این یکی باشه
و حالا دیگه درست شد
و اون ۸۰۰ی که مشخص کرده بودیم
الان
جایگزین اون ۵۰۰ شد
اما اون ۲۰۰ی که اینجا بود هنوز فعاله
و برای همین تناسب تصویر الان
کاملاً به‌هم خورده درسته؟
پس دیگه ظاهر درستی نداره
خیلی کشیده شده به عرض
و برای درست کردنش
وقتی ارتفاع در اچ‌تی‌ام‌ال مشخص شده باشه
کاری که باید بکنیم اینه که ارتفاع رو بذاریم روی خودکار
و اینطوری
تناسب تصویر به حالت اصلیش برمی‌گرده
و اینجوری درست میشه و تناسب تصویر
به شکل اولیه برمی‌گرده خب؟
ولی دوباره می‌گم مشخص کردن ارتفاع و گذاشتنش
روی خودکار فقط وقتی لازمه که
ارتفاع از قبل توی اچ‌تی‌ام‌ال مشخص شده باشه
اگه این کار رو نکنیم
یعنی اگه هیچ ابعادی برای تصویر توی اچ‌تی‌ام‌ال مشخص نکنیم
اون‌وقت وقتی ارتفاع یا عرض رو با سی‌اس‌اس تعیین کنیم
مقدار دیگه به‌طور خودکار تنظیم میشه تا
تناسب اصلی تصویر حفظ بشه
برای مثال اگه اینو بذاریم روی ۳۰۰
خیلی کوچیک میشه درسته؟
ولی حالا همونطور که گفتم بیاید بریم سراغ
استفاده از درصد برای اولین بار و از پیکسل فاصله بگیریم
خب می‌تونم عرض رو اینطوری مشخص کنم
یعنی ۱۰۰٪
و معمولاً برای اندازه‌گیری عرض اینطوری
درصد بر اساس درصدی از عرض
ظرف والد محاسبه میشه
پس والد تصویر پست همون سرصفحه‌ست
و این سرصفحه درواقع کل عرض
صفحه رو گرفته درسته؟
پس اگه بگم عرض ۱۰۰٪
این تصویر باید عرض کل صفحه بشه
و دقیقاً همین اتفاق هم میفته
و چیزی که اینجا خاصه اینه که حالا
وقتی اندازه پنجره تغییر کنه
اندازه تصویر همیشه روی همون ۱۰۰٪ می‌مونه
خب؟
چون این همون اندازه ظرف والدشه
البته می‌تونستیم چیز دیگه‌ای هم بذاریم
مثل نصف اندازه ظرف والد
و همچنان اینطوری میشه که
وقتی اندازه ظرف والد تغییر کنه
اندازه تصویر هم باهاش هماهنگ میشه
خب؟ و این چیزی هست که بعداً
خیلی خیلی مهم میشه وقتی شروع کنیم
به ساخت وبسایت‌های واکنش‌گرا
یعنی وبسایت‌هایی که خودشون رو با عرض صفحه تطبیق میدن خب؟
ولی حالا دوباره برش گردونیم روی ۱۰۰٪
که همون چیزی بود که اول می‌خواستیم
و با این فکر می‌کنم دیگه کارمون تمومه
با تنظیم ارتفاع و عرض‌ها حداقل فعلاً