آموزش تصاویر در واکنش گرایی در CSS

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

اگر ویژگی width برای یک تصویر برابر با یک مقدار درصد قرار گیرد و ویژگی height برابر با "auto" قرار گیرد، این تصویر واکنش گرا خواهد شد و مقیاس(scale) آن کم و زیاد خواهد شد. 

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

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

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

اگر ویژگی max-width برابر  با %100 قرار گیرد، تصویر مورد نظر در صورت اجبار، مقیاسش کمتر می شود یعنی کوچکتر می شود اما هرگز مقیاس آن زیاد نمی شود تا بزرگ تر از سایز اصلی خود شود:

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

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

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

بررسی تصاویر پس زمینه(Background Images)

تصاویر پس زمینه نیز به تغییر اندازه و مقیاس دهی(scaling) پاسخ می دهند. در زیر سه روش مختلف را برای این امر نشان می دهیم:

1. استفاده از دستور background-size: contain; : با استفاده از این دستور، مقیاس تصویر پس زمینه کم یا زیاد خواهد شد و تلاش می کند تا در ناحیه ی محتوا(content area) جا شود. اما تصویر مورد نظر نسبت ابعاد(aspect ratio) خود را حفظ می کند(به رابطه ی متناسب بین عرض و ارتفاع تصویر، نسبت ابعاد گفته می شود). 

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

2. استفاده از دستور background-size: 100% 100%; : با استفاده از این دستور، تصویر پس زمینه کشیده() می شود تا کل ناحیه ی محتوا(content area) را پر کند:

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

3. استفاده از دستور background-size: cover; : با استفاده از این دستور، تصویر پس زمینه مقیاس دهی می شود تا کل ناحیه ی محتوا را بپوشاند. توجه کنید که مقدار "cover" نسبت ابعاد(aspect ratio) را حفظ می کند و ممکن است بخش هایی از تصویر پس زمینه، برش(clipped) بخورد. 

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

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

یک تصویر بزرگ می‌تواند روی صفحه بزرگ کامپیوتر مناسب باشد، اما روی یک دستگاه کوچک بی‌فایده باشد. چرا باید یک تصویر بزرگ را بارگذاری کنیم، وقتی که در هر صورت باید مقیاس آن را کوچک(scale down) کنیم؟ برای کاهش دادن زمان بارگذاری(load) یا به هر علت دیگری، می توانیم از مدیا کوئری ها برای نمایش دادن تصاویر مختلف در دستگاه های متفاوت استفاده کنیم. 

 /* برای عرض های کمتر از 400 پیکسل */
body {
  background-image: url('img_smallflower.jpg');
}

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

استفاده از عنصر <picture>

عنصر اچ تی ام ال <picture> در مشخص کردن منابع تصویرها، انعطاف پذیری بیشتری را به برنامه نویسان می دهد. متداول ترین استفاده از عنصر <picture> در تصاویری است که در طراحی های واکنش گرا مورد استفاده قرار می گیرند.  به جای اینکه از یک تصویر استفاده شود که بسته به منطقه دید یا viewport مقیاس دهی آن کم یا زیاد شود، می توانیم از چند تصویر استفاده کنیم که طوری طراحی شده اند که به خوبی منطقه دید(viewport) مرورگر را پر می کنند. عنصر <picture> مانند عناصر <video> و <audio> کار می کند. ما برای این عنصر منابع(source) مختلفی را تنظیم می کنیم و اولین منبعی که اولویت داشته باشد، مورد استفاده قرار می گیرد:

<picture>
  <source srcset="/img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="/img_flowers.jpg">
  <img src="/img_flowers.jpg" alt="Flowers">
</picture>

استفاده از خصوصیت srcset ضروری است و منبع(source) تصویر را مشخص می کند. استفاده از خصوصیت media اختیاری است و مدیا کوئری هایی که در دستور @media پیدا می کنیم را می پذیرد. ما همچنین باید یک عنصر <img> را هم برای مرورگرهایی که از عنصر <picture> پشتیبانی نمی کنند، تعریف کنیم. 

منبع: https://www.w3schools.com/css