تصاویر ریسپانسیو CSS

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

افزودن تصاویر ریسپانسیو با CSS

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

سه روش اصلی برای یکپارچه سازی تصاویر پس زمینه CSS وجود دارد. شما می توانید از فایل های تصویری مختلف بر اساس اندازه ویوپورت دستگاه ها استفاده کنید.

تعیین عرض برای مقیاس گذاری

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

با تنظیم عرض روی 100٪ می توانید مقیاس پایین و بالا را فعال کنید.

img {
    width: 100%;
    height: auto;
}

در مثال بالا ، تصویر می تواند کوچک شود تا زمانی که از اندازه اصلی بزرگتر شود. بنابراین ، ممکن است تصاویر در صفحه های بزرگتر کیفیت پایین تری داشته باشند.

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

img {
    max-width: 100%;
    height: auto;
}

تنظیم اندازه پس زمینه برای متناسب بودن صفحه

با استفاده از تصاویر ریسپانسیو CSS می توانید ویژگی اندازه تصویر را متناسب با صفحه تنظیم کنید (viewport).

خاصیت background-size دارای مقدار پوشش است. این به مرورگرها دستور می دهد تا عرض و ارتفاع یک تصویر پس زمینه پاسخگو را به طور خودکار اندازه یا بزرگتر از نمای نمایش دهند.

در این مثال کد ، اندازه تصویر پس زمینه CSS را متناسب با صفحه قرار می دهیم:

html {    
    background: url('image.png') no-repeat center fixed;     
    background-size: cover;
}

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

اطلاعات بیشتر در مورد تصویر پس زمینه

حفظ نسبت ابعاد

اگر تصویر کوچکی دارید و می خواهید کیفیت آن را حفظ کنید ، این روش را انتخاب کنید.

ویژگی background-size را در آن تنظیم کنید. این به مرورگر می گوید که تصویر پس زمینه برای متناسب کردن با محتوا مقیاس بندی می کند ، اما نسبت ابعاد خود را از دست نمی دهد و تار نمی شود.

div {
    width: 100%;
    height: 300px;
    background-image: url('doggo.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 2px solid #e9385a;
}

تصاویر کششی برای پر کردن منطقه

می توانید ویژگی background-size را روی 100٪ تنظیم کنید تا تصویر متناسب با یک منطقه خاص کشیده شود:

div {
    width: 100%;
    height: 300px;
    background-image: url('doggo.jpg');
    background-size: 100% 100%;
    border: 2px solid #e9385a;
}

پوشش منطقه ، اما حفظ نسبت ابعاد

برای پوشاندن ناحیه با تصویر پس زمینه و حفظ نسبت ابعاد آن ، می توانید ویژگی background-size را  برای پوشاندن تنظیم کنید. ممکن است بخشی از تصویر را قطع کند تا متناسب باشد.

div {
    width: 100%;
    height: 300px;
    background-image: url('doggo.jpg');
    background-size: cover;
    border: 2px solid #e3985a;
}

تصاویر ریسپانسیو و رسانه

تصاویر بزرگ در صفحه های کوچک می توانند با بارگذاری طولانی تر صفحه ، تجربه کاربر را بدتر کنند.

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

در مثال زیر دو تصویر وجود دارد (یکی بزرگتر و دیگری کوچکتر). CSS متناسب با اندازه صفحه نمایش را برای نمایش انتخاب می کند:

/* For screens with width smaller than 400px */
body {
    background-image: url('small-birb.jpg'); 
}

/* For larger screens */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('birb.jpg'); 
   }
}

به جای min-width ، می توانید از کوئری رسانه به نام min-device-width استفاده کنید. با عرض نمای دستگاه پاسخگو است.

بنابراین ، اطمینان حاصل می کند که هنگام تغییر اندازه ،اندازه پنجره مرورگر ، تصویر تغییر نمی کند:

/* For devices with width smaller than 400px */
body {
    background-image: url('birb-small.jpg'); 
}

/* For larger devices */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('birb.jpg'); 
   }
}

عنصر <picture> در HTML5

عنصر <picture> در HTML5 معرفی شد. برای تعریف دو یا چند تصویر است.

بخاطر بسپارید: <picture> گزینه هایی را برای نمایش تصاویر مختلف هنگامی که یک تصویر بارگیری نمی شود یا اندازه تصویر به اندازه صفحه بستگی دارد فراهم می کند.

<picture>
  <source srcset="birb-small.jpg" media="(max-width: 400px)">
  <source srcset="doggo.jpg">
  <img src="doggo.jpg" alt="cannot display">
</picture>

برای تعیین منبع تصویر باید ویژگی srcset را تنظیم کنید. شما می توانید به اندازه مورد نیاز منبع تنظیم کنید ، اما به خاطر داشته باشید که ترتیب تعیین آنها مهم است. اولین منبع متناسب با تنظیمات کد شما استفاده می شود.

ویژگی رسانه مورد نیاز نیست ، اما باید آن را تنظیم کنید تا سوالات رسانه را بپذیرد. همچنین باید عنصر <img> را برای مرورگرهای قدیمی که از عناصر HTML5 و <picture> پشتیبانی نمی کنند ، تعریف کنید.

نکته مهم تصویر ریسپانسیو CSS:

• همچنین می توانید با استفاده از Bootstrap تصاویر ریسپانسیو بسازید. این تصاویر را با اضافه کردن کلاس .img-fluide و نه img-responsive (متناسب با بوت استرپ 3) ، متناسب با اندازه صفحه تنظیم می کند.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.