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

width پرپرتی کا استعمال

اگر width پرپرتی کا مقادیر فیصد میں رکھا جائی اور اونچائی کو "auto" رکھا جائی، تو تصویر کو اونچائی یا کوچھ سائز داری کریگی جائی:

مثال

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

آزمایش کنید

لطفاً یقین رکھیجئے کہ اوپر کے مثال میں تصویر کو اصل سائز سے بڑا کریگی جائی، لیکن زیادہ تر صورت میں بہتر حل یہ ہوگا کہ max-width پرپرتی

max-width پرپرتی کا استعمال

اگر max-width پرپرتی کا مقادیر 100 فیصد رکھا جائی، تو تصویر کو حسب ضرورت کوچھ سائز داری کریگی جائی، لیکن کوئی بھی صورت میں اس کو اصل سائز سے بڑا نہیں کریگی:

مثال

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. اگر background-size اگر属性 به عنوان "100% 100%" تنظیم شود، تصویر پس‌زمینه کشیده خواهد شد تا کل محدوده محتوایی را پوشش دهد:

این کد CSS است:

مثال

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

آزمایش کنید

3. اگر background-size اگر属性 به عنوان "cover" تنظیم شود، تصویر پس‌زمینه به اندازه کافی بزرگ خواهد شد تا کل محدوده محتوایی را پوشش دهد. توجه داشته باشید که مقدار "cover" نسبت ارتفاع و عرض را حفظ می‌کند و ممکن است بخشی از تصویر پس‌زمینه را برش دهد:

این کد CSS است:

مثال

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

آزمایش کنید

برای دستگاه‌های مختلف تصاویر مختلف آماده کنید

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

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

مثال

/* برای عرض کمتر از 400 پیکسل: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* برای عرض 400 پیکسل یا بزرگتر: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

آزمایش کنید

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

مثال

/* برای دستگاه‌هایی با کمتر از 400 پیکسل: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* برای دستگاه‌هایی با 400 پیکسل و بزرگتر: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

آزمایش کنید

عناصر HTML5 <picture>

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

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

38.0 13 38.0 9.1 25.0

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

مثال

<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 ویژگی‌ها انتخابی هستند و می‌توانند در قانون @media CSS در جستجوی رسانه‌ها پیدا کنید.

توجه:باید برای رسانه‌هایی که پشتیبانی نمی‌کنند <picture> تعریف مرورگر عنصر <img> عنصر.