0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی 09133886881 احمدپور

آرشیو برچسب ها

دوستان وب یاری با دانش من سلام جلسه دوم ریسپانسیو کردن تصاویر Responsive Images با ادامه مطلب آموزش چگونگی ریسپانسیو کردن تصاویر با شما همراه هستیم,در آموزش قبلی سه خصوصیت(property) برای  background-size معرفی کردیم,در این آموزش میخواهیم ادامه های خصوصیت های background-size را برای ریسپانسیو کردن کردن تصاویر به شما آموزش میدهیم. خصوصیت background-size:cover باعث میشود تا تصویر شما مقیاس بندی شود تا اینکه تمامی ناحیه ی content را بپوشاند.با توجه به مثال زیر به درک بهتری از این مطلب میرسید. div { width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); background-size: cover; border: 1px solid red; }   نمایش تصاویر با اندازهای گوناکون برای صفحه نمایش های گوناگون: یک تصویر بزرگ میتواند بر روی یک کامپیوتر با صفحه نمایش بزرگ به صورت کامل نمایش داده شود اما بر روی یک صفحه ی کوچک به درستی نمایش داده نشود. به منظور کاهش حجم لود تصاویر و یا به هر دلیل دیگری شاید شما بخواهید برای صفحه نمایش های مختلف از تصاویر مختلف استفاده کنید.بنابراین بهتر است که شما برای وسایل گوناکون با صحفه نمایش های گوناگون تصاویر گوناگون را لود کنید. در زیر ما دو تصویر با اندازه گوناگون داریم:   /* For width smaller than 400px: */ body { background-image: url(‘img_smallflower.jpg’); } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url(‘img_flowers.jpg’); } […]