مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، کار با عکس ها
آموزش بوت استرپ ، کار با عکس ها

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

ریسپانسیو ( Responsive ) یا واکنشگرا کردن تصاویر در بوت استرپ :

یکی از امکانات خوب بوت استرپ، ریسپانسیو کردن خودکار تصاویر در صفحه وب است. با اضافه کردن کلاس img-responsive به تگ <img> به راحتی می توانید تصاویر خود را در تمام سایزهای صفحه نمایش به صورت کاملا واکنشگرا نمایش دهید. این بدان معنی است که با اضافه کردن این کلاس به تگ <img> در کلیه سایزها با استایل ;display:block و ;max-width:100% و ;height:auto نمایش داده خواهد شد.

گرد کردن گوشه های تصاویر در بوت استرپ :

جهت گرد کردن گوشه های یک تصویر در بوت استرپ می توانید از کلاس img-rounded استفاده کنید.

دایره ای کردن تصاویر در بوت استرپ:

در Bootstrap می توانید با اضافه کردن کلاس img-circle به تگ <img> تصاویر را دایره ای کنید.

مثال :

ایجاد حاشیه برای تصاویر در بوت استرپ:

توسط کلاس img-thumbnail در بوت استرپ می توانید برای تصاویر یک حاشیه یا border به ضخامت ۱px به دور تصویر ایجاد کنید. این کلاس معمولا برای تصاویر thumbnail استفاده می شود.

مثال :

در اینجا لازم است اشاره کنیم که کلاس های img-rounded and .img-circle در اینترنت اکسپلورر، نسخه ۸ به پایین کار نمی کند و تاثیری در عکس ها ندارد.

تعریف aspect ratio:

به نسبت پهنای تصویر به ارتفاع آن " ابعاد تصویر یا Aspect ratio " گفته می شود. بطور استاندارد دو نوع نسبت تصویر در تلویزیون ها و مانیتورها داریم. ۴:۳ برای تلوزیون های قرن بیستم و ۱۶:۹ برای تلوزیون های جدید که همیشه اول عدد بزرگتر را باید خواند. این اعداد به این صورت خوانده می شوند: چهار به سه و دیگری شانزده به نه. ابعاد تصویر ۴:۳ یعنی ۴ واحد برای عرض و ۳ واحد برای ارتفاع آن در نظر گرفته شده است. ابعاد تصویر ۱۶:۹ یعنی ۱۶ واحد برای پهنا و ۹ واحد برای ارتفاع آن در نظر گرفته شده است.

در بوت استرپ می توانید به راحتی عناصر <iframe> ، <embed> ، <video> ،<object>  را نسبت به ابعاد تصویر مقیاس بندی کنید.

 

تاریخ آخرین بروزرسانی : ۲۴ مهر ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

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

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.