تصاویر ریسپانسیو در وبسایت

در این مقاله به اهمیت و نحوه کد نویسی تصاویر ریسپانسیو خواهیم پرداخت با ما همراه باشید.

آموزش طراحی سایت تصاویر ریسپانسیو

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

اگر ویژگی width روی 100% تنظیم شده باشد تصویر شما بصورت ریسپاسیو نمایش داده شده و با تغییر اندازه صفحه تغییر سایز میدهد:

مثال:

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

مشاهده نتیجه

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

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

اگر ویژگی max-width بر روی 100% تنظیم شده باشد تصویر شما در صورت نیاز از اندازه اصلی کوچکتر خواهد شد و در هیچ شرایطی از اندازه اصلی بزرگتر نمی شود.

مثال:

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

مشاهده نتیجه

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

مثال:

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

مشاهده نتیجه

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

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

متد های مختلف برای تصاویر پس زمنیه

اگر ویژگی background-size بر روی contain تنظیم شده باشد تصویر پس زمینه تغییر سایز خواهد داد و ناحیه محتوا را پر خواهد کرد . ولی تصویر در این شرایط نسبت خود را حفظ خواهد کرد:

مثال:

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}

مشاهده نتیجه

2. اگر ویژگی background-size بر روی 100% 100% تنظیم شده باشد تصویر پس زمینه کشیده شده تا تمام ناحیه محتوا را پر کند:

مثال:

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}

مشاهده نتیجه

3. اگر ویژگی background-size بر روی cover تنظیم شده باشد تصویر پسزمینه تمام ناحیه محتوا را پر خواهد کرد ولی نسبت تصویر بهم نخواهد خورد بنابراین ممکن است قسمتی از تصویر دیگر دیده نشود:

مثال:

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');
}
}

مشاهده نتیجه

شما میتوانید از مدیا کوئری min-device-width بجای min-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

Html5 تگ <picture> را معرفی کرده است که به شما اجازه معرفی بیش از یک عکس را خواهد داد.

برای استفاده از تگ <picture> باید مانند تگ های <video> و <audio> به آن منابع مختلف معرفی کنیم. و هر منبعی که با اندازه مد نظر هماهنگ باشد نمایش داده خواهد شد

مثال: