021-28423015
021-28423015

طراحی ریسپانسیو وب – تصاویر

اندازه پنجره مرورگر را تغییر دهید تا ببینید که تصویر چقدر به اندازه صفحه مناسب است.

استفاده از ویژگی width

اگر ویژگی width  به 100٪ تنظیم شود، تصویر ریسپانسیو خواهد بود:

ویژگی width
img {
    width: 100%;
    height: auto;
}
مشاهده مثال

توجه داشته باشید که در مثال بالا، تصویر را می توان بزرگتر از اندازه اصلی آن دانست. در بسیاری از موارد یک راه حل بهتر وجود دارد و آن استفاده از ویژگی max-width است.

استفاده از ویژگی max-width

اگر مقدار max-width به 100٪ تنظیم شود، تصویر اگر مقداری دارد، مقیاس آن را کاهش دهد، اما هرگز مقیاس از اندازه اصلی آن بزرگتر نیست:

ویژگی max-width
img {
    max-width: 100%;
    height: auto;
}
مشاهده مثال

یک تصویر را به مثال وب اضافه کنید

اضافه کردن تصویر به مثال وب
img {
    width: 100%;
    height: auto;
}
مشاهده مثال

پس زمینه تصویر

تصاویر پس زمینه نیز می توانند به تغییر اندازه و پوسته پوسته شدن پاسخ دهند.

در اینجا ما سه روش مختلف را نشان می دهیم:

1- اگر مقدار background-size به " contain"تنظیم شده است ، تصویر پس زمینه مقیاس می شود و سعی کنید متناسب با محتویات محتوا باشد. با این وجود، تصویر نسبت تصویر آن (نسبت متناسب بین عرض تصویر و ارتفاع) را حفظ می کند:

 

در اینجا کد CSS است:

پس زمینه تصاویر
.div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}
مشاهده مثال

2- اگر ویژگی پسزمینه به " 100٪" تنظیم شده باشد، تصویر پس زمینه برای پوشش کل منطقه محتوا کشیده می شود:

 

در اینجا کد CSS است

اندازه پس زمینه
.div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
مشاهده مثال

3- اگر ویژگی پسزمینه روی « cover» تنظیم شده باشد، تصویر پسزمینه برای پوشش کل منطقه محتوا مقیاس می شود. توجه داشته باشید که مقدار "cover" نسبت تصویر را حفظ می کند، و برخی از قسمت های تصویر پس زمینه نیز ممکن است قطع شوند:

 

در اینجا کد CSS است:

cover در اندازه پس زمینه
.div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}
مشاهده مثال

تصاویر مختلف برای دستگاه های مختلف

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

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

اندازه مختلف برای دستگاه های مختلف
 /* 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');
    }
} 
مشاهده مثال

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

min-device-width
/* For devices smaller than 400px: */
.body {
    background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
مشاهده مثال

عنصر <picture>

HTML5 عنصر <picture> را معرفی کرد که به شما اجازه می دهد بیش از یک تصویر را تعریف کنید.

پشتیبانی مرورگر

ویژگی
<picture>
13
38.0
38.0
9.1
25.0

عنصر <picture> شبیه عناصر <video> و <audio> است. شما منابع مختلف را تنظیم می کنید و منبع اول که مطابق ترجیحات است یکی از موارد استفاده شده است:

تگ picture
 <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture> 
مشاهده مثال

ویژگی srcset مورد نیاز است و منبع تصویر را تعریف می کند.
خصیصه media  اختیاری است
شما همچنین باید عنصر <img> را برای مرورگرهایی که از عنصر <picture> پشتیبانی نمی کنند تعریف کنید.

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط