نسبتهای تصویر را با CSS3 کنترل کنید

محتوا

• 01. متناسب بودن اشیا
• 02. موقعیت جسم
• 03. نسبت را حفظ کنید
• 04. غلبه بر نسبت تصویر یک ویدیو
• 05. اثرات انتقال
• 06. خلاصه
• این را دوست داشتید؟ اینها رو بخون!

• دانش مورد نیاز: HTML و CSS متوسط
• نیاز دارد: ویرایشگر متن ، Opera 11 + / WebKit شبانه / سایر مرورگرهای پشتیبانی کننده
• زمان پروژه: سریعتر از آنچه تصور می کنید
• پرونده پشتیبانی

این مقاله اولین بار در شماره 214 مجله .net منتشر شد.

کنترل نسبت ابعاد عناصر جایگزین شده ، مانند img> یا ویدئو>، می تواند یک درد باشد. به عنوان مثال ، ممکن است بخواهید همه تصاویر در یک صفحه فضای یکسانی را اشغال کنند ، اما وقتی کسی از یک فایل تصویری که اندازه آن مناسب نیست استفاده کند ، نسبت تصویر خود را تحریف نکرده و از دست ندهد.

تغییر اندازه و جعبه جعبه عکس برای حفظ نسبت ابعاد ، یک راه حل بسیار ظریف تر از له کردن و کشش یک تصویر مناسب است. یا ممکن است بخواهید برعکس حرکت کنید و موارد جعبه نامه مانند HTML5 را مجبور کنید ویدئو>s ، برای مطابقت با عرض و ارتفاع خاص. ممکن است شما بخواهید همه ویدئوها نسبت ابعادی خاصی داشته باشند و راه حلی بخواهید که ویدیوهایی با نسبت ابعاد مختلف به طور خودکار به درستی ظاهر شوند؟

این مشکل حتی هنگامی که با CMS کار می کنید که دارای چندین نویسنده محتوایی است که فیلم ها و تصاویر را بارگذاری می کنند ، ناخوشایندتر است ، به ویژه اگر آنها در مقابل کارمندان ، کاربران نهایی باشند. شما سیستمی می خواهید که رسانه را پردازش کند تا به طور مداوم نمایش داده شود ، اما این نوع کار کاملاً دشوار است ، برای دسترسی و دستکاری اندازه ها در جاوا ، نیاز به جاوا اسکریپت ، ترفندهای زیادی برای CSS یا پیش پردازش های زیاد با زبان سمت سرور ، لازم است. مانند PHP.

CSS3 پاسخی آسان ارائه می دهد که در حال حاضر در افق نزدیک است. پیش نویس CSS Image Values ​​و ماژول محتوای جایگزین شده ویژگی را به نام object-fit تعریف می کند که هدف آن حل دقیقاً این نوع مشکلات است. و این ماژول همچنین شامل یک ویژگی مربوط به آن ، موقعیت موقعیتی است که می توانید از آن برای تنظیم موقعیت افقی و عمودی محتوای داخل عنصر استفاده کنید. تمام آنچه برای بررسی کامل نمونه های اینجا نیاز دارید یک مرورگر پشتیبانی کننده مانند Opera 11 یا شبانه وب کیت است. قبل از ادامه بررسی برخی از مثالها ، بیایید نحو اساسی خواص جدید را بررسی کنیم.

01. متناسب بودن اشیا

می توانید با موفقیت اقدام کنید متناسب بودن شی به هر عنصر جایگزین شده (عنصر جایگزین شده هر عنصری است که محتوا و شکل ظاهری آن توسط یک منبع خارجی مانند تصویر ، فیلم یا فایل SVG تعریف شده باشد.) کد به شرح زیر است:

img {
ارتفاع: 100 پیکسل
عرض: 100 پیکسل
object-fit: حاوی؛
}

توجه داشته باشید که در نمونه کد و مثالهای این مقاله ، عرض و ارتفاع عناصر جایگزین شده خود را در CSS تنظیم می کنیم. متناسب با اشیا همچنین هنگامی که ابعاد با استفاده از ویژگی های HTML مشخص شده اند ، اثر می گذارد. با این حال ، این ایده خوبی نیست. در مرورگرهایی که از این ویژگی CSS پشتیبانی نمی کنند ، این باعث می شود که عناصر جایگزین شده همیشه له یا کشیده به نظر برسند ، مگر اینکه مسلماً یک راه حل جایگزین مانند پیش پردازش PHP در ابعاد رسانه داشته باشید. در عوض ، ابعاد را حذف کرده و به مرورگرها اجازه می دهیم آنها را با استفاده از اندازه های ذاتی خود نمایش دهند. رویکردی که برای شما بهتر کار کند به شرایط خاص شما بستگی دارد.

متناسب با اشیا دارای چهار مقدار ممکن است که به شرح زیر است:

• حاوی: اگر بر روی یک عنصر جایگزین شده ، ارتفاع و عرض مشخصی تنظیم کرده باشید ، object-fit: حاوی؛ باعث تغییر اندازه محتوا (به عنوان مثال تصویر) می شود تا کاملاً با نسبت ابعادی ذاتی اش حفظ شود ، اما همچنان در ابعاد تعیین شده برای عنصر جای می گیرد.

• پر کردن: این تنظیم باعث می شود محتوای عنصر گسترش یابد تا ابعاد تعیین شده برای آن کاملاً پر شود ، حتی اگر این امر باعث از بین رفتن نسبت ابعادی ذاتی آن شود.
• پوشش دادن: با استفاده از این تنظیم نسبت ذاتی محتوای عنصر حفظ می شود ، اما عرض و ارتفاع را تغییر می دهد تا محتوا عنصر را کاملاً بپوشاند. از عرض و ارتفاع کوچکتر متناسب با عنصر ساخته می شود و ابعاد بزرگتر عنصر را سرریز می کند.
• هیچ یک: وقتی از مقدار استفاده می کنید هیچ یک، محتوا به طور کامل از هر قد یا وزن تنظیم شده روی عنصر چشم پوشی می کند و فقط از ابعاد ذاتی عنصر جایگزین شده استفاده می کند. گرچه ارزش هیچ یک در مشخصات اصلی بود و در Opera پشتیبانی می شود ، سپس در نسخه بعدی مشخصات حذف شد. با این حال ، ممکن است در یک تکرار آینده بازگردد.توجه: برای دیدن اینکه چطور این مقادیر بر نسبت ابعاد تصویر تأثیر می گذارند به وضوح بیشتری مراجعه کنید object-fit-diagram.png در فایلهای آموزشی

02. موقعیت جسم

موقعیت جسم دقیقاً به همان روشی کار می کند که موقعیت پس زمینه برای تصاویر پس زمینه انجام می شود ، و می تواند مقادیر یکسانی (پیکسل ، EM ، درصد ، کلمات کلیدی و غیره) را بدست آورد. موقعیت محتوای یک عنصر جایگزین شده را در داخل منطقه آن عنصر مشخص می کند. مثلا:

img {
ارتفاع: 100 پیکسل
عرض: 100 پیکسل
object-fit: حاوی؛
موقعیت موقعیت: 75٪ بالا
}

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

03. نسبت را حفظ کنید

گاهی اوقات به عنوان جعبه نامه شناخته می شود ، بعضی اوقات می خواهید نسبت ابعاد تصاویر را در یک صفحه حفظ کنید و آنها را در همان قسمت قرار دهید. به عنوان مثال ، ممکن است شما یک سیستم مدیریت محتوا داشته باشید که به شما امکان می دهد محصولات را در یک سایت تجارت الکترونیکی یا تصاویر را برای یک گالری تصاویر با تعداد زیادی نویسنده محتوای مختلف بارگذاری کنید.

آنها ممکن است تصاویر را تقریباً در اندازه مناسب بارگذاری کنند ، اما ابعاد همیشه دقیق نیستند ، صرف نظر از دستورالعمل هایی که ممکن است منتشر کنید! در این حالت ، می توانید نسبت ابعاد را تغییر دهید تا تصاویر کاملاً در یک منطقه قرار بگیرند ، اما این احتمالاً وحشتناک به نظر می رسد.

گزینه دیگر جعبه تصاویر است. این بسیار بهتر به نظر می رسد ، اما دستیابی به آن در سمت مشتری با پشتیبانی از مرورگر فعلی کاملاً پیچیده است. البته می توانید از نوعی راه حل سمت سرور برای پیش پردازش تصاویر استفاده کنید ، اما این دوباره پیچیده است و سربار بیشتری به شما می افزاید.

با این کار می توانید به راحتی از پس این مشکل برآیید متناسب بودن شی:

img {
عرض: 150 پیکسل
ارتفاع: 150 پیکسل
...
object-fit: حاوی؛
}

در مثال من ، تصاویر کوچک تنظیم شده اند تا به یک اندازه و عرض یکسان باشند ، اما object-fit: حاوی؛ همه تصاویر را مجبور می کند تا در همان منطقه قرار بگیرند و نسبت ابعاد را حفظ کنند. یک راه حل حتی بهتر ، بسته به کاربرد شما ، ممکن است حفظ نسبت ابعاد باشد ، اما اندازه و برش تصویر را تغییر دهید تا کاملاً محصور شود img> عنصر

با تعویض ، می توان این کار را به راحتی انجام داد object-fit: حاوی؛ با متناسب با شی: پوشش؛ و اضافه کردن سرریز: پنهان به ترکیب:

img {
...
متناسب با شی: پوشش؛
سرریز: پنهان
}

در این مورد، متناسب با شی: پوشش؛ باعث می شود تصاویر به طور کامل افزایش یابد تا کاملاً محصور شود img> عناصر ، و سرریز: پنهان سپس ناحیه تصویر را که خارج از آن عناصر می ریزد ، خرد می کند (اتمام کنید) object-fit-cover-images.html در پرونده های نمونه)

04. غلبه بر نسبت تصویر یک ویدیو

در مثال بعدی ما ، یک فیلم با نسبت ابعاد شکسته می گیریم و آن را مجبور می کنیم نسبت ابعاد را تغییر دهد و کاملاً در ویدئو> اندازه عنصر را مشخص کردیم. چرا می خواهی این را انجام دهی؟ شاید برخی از فیلم هایی که ویراستاران محتوای شما در CMS شما بارگذاری می کنند نسبت ابعادی خراب دارند و به عنوان مثال می خواهید همه آنها را برطرف کنید.

متناسب بودن اشیا: پر کردن ؛ ما را قادر می سازد که این کار را با یک ضربه انجام دهیم. برای نشان دادن این نکته ، object-fit: پر کردن؛ مثال ویدیویی (نگاه کنید به object-fit-fill-video.html در مثالهای کد) از دو مورد استفاده می کند ویدئو> عناصر ، به شرح زیر است:

کنترل های ویدئویی = "کنترل" src = "windowsill.webm" width = "426" height = "240">
/ فیلم>
کنترل های ویدیویی = "کنترل" src = "windowsill.webm" عرض = "426" ارتفاع = "240"
>
/ فیلم>

حتی اگر ویدئو> عناصر دارای ویژگی های عرض و ارتفاع مشخص شده در نشانه گذاری هستند ، به طور پیش فرض آنها در جعبه نامه ظاهر می شوند ، زیرا آنها دارای نسبت ابعادی متفاوت هستند.

ویدئو> این عنصر همیشه سعی در حفظ نسبت ابعادی فایل اصلی دارد.

برای رفع این مشکل ، ما مجبور شده ایم که همه فیلم ها با عرض و ارتفاع فیلم مطابقت داشته باشند ویدئو> عناصر با استفاده از object-fit: پر کردن؛:

.object-fit {
...
object-fit: پر کردن؛
}

این باعث می شود همه فیلم ها با همان نسبت ابعاد نمایش داده شوند.

05. اثرات انتقال

ترکیب کردن متناسب بودن شی و موقعیت جسم با انتقال CSS می تواند جلوه های جالبی را برای گالری های تصویر یا ویدئو ایجاد کند:

در این مثال (نگاه کنید به object-fit-none-transitions.html، در فایلهای آموزشی) ، من گالری تصویری را که در مثال اول دیدیم ، گرفته ام و:

• از موقعیت محور مثال خلاص شوید و موقعیت تصاویر و زیرنویس ها را عوض کنید تا فضای بیشتری برای تصویر به تصویر داشته باشید.
• کاملاً متفاوت قرار گرفته است divs> حاوی تصاویر و زیرنویس های آنها ، بنابراین همه آنها در یک مکان ظاهر می شوند ، و همه آنها را با استفاده از پیش فرض پنهان می کنید تیرگی: 0؛.
• مجموعه ای از پیوندهای ناوبری در بالای مثال برای حرکت بین مجموعه های مختلف تصویر / زیرنویس اضافه شده و از آن استفاده شده است :هدف کلاس شبه بعلاوه انتقالها برای ایجاد هموار بودن و ناپدید شدن آنها هنگام چرخش پیوندها (بله ، این روشی برای ایجاد یک فهرست زبانه دار بدون استفاده از JavaScript است).
• اضافه تبیندکس و کلیدهای دسترسی برای دسترسی به پیوندها و تصاویر فقط با استفاده از صفحه کلید.
• مهمتر از همه برای اهداف این مقاله ، مبادله object-fit: حاوی؛ CSS برای موارد زیر:

img {
عرض: 150 پیکسل
ارتفاع: 150 پیکسل
...
متناسب با شی: هیچ؛
سرریز: پنهان
موقعیت جسم: 25٪ 50٪؛
انتقال: 1s همه؛
...
}
img: شناور ، img: تمرکز {
...
ارتفاع: 400 پیکسل
عرض: 400 پیکسل
}

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

در عوض ، فقط قسمت کوچکی از تصویر نشان داده می شود ، و عنصر رشد می کند تا بیشتر تصویر را آشکار کند. چه چیزی می دهد؟

با تنظیم متناسب با شی: هیچ؛ در img> عناصر ، من به محتوای آنها می گویم که عرض و ارتفاع تنظیم شده را قبلاً کاملاً نادیده بگیرند و از کناره های عناصر بیرون بریزند.

از آنجا که اندازه ذاتی فایلهای تصویری بسیار بزرگتر از ابعاد مشخص شده برای فایلهای تصویری است img> عناصر ، من استفاده کرده ام سرریز: پنهان برای برداشتن هر چیزی که بیرون ریخته شود

سپس از یک انتقال برای افزایش هموار اندازه اندازه استفاده می شود img> عنصر در هنگام چرخش / تمرکز ، که بیشتر تصویر را نشان می دهد.

و این تمام نیست. من همچنین از موقعیت جسم: 25٪ 50٪؛ خاصیت برای حرکت دادن موقعیت تصویر روی img> کمی به سمت راست منتقل شود ، که یک اثر آشکار محتوا ایجاد می کند.

06. خلاصه

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

کریس ، مدیر روابط توسعه دهنده اپرا ، همچنین با خدایان سنگ راک متال Conquest of Steel بازی می کند.

این را دوست داشتید؟ اینها رو بخون!

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