طراحی وب واکنش‌گرا - تصاویر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


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

اگر ویژگی width به درصد تنظیم شده باشد و ارتفاع نیز برابر با "auto" باشد، تصویر واکنش گرا شده و کوچک و بزرگ خواهد شد:[۱]

مثال

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


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

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

اگر ویژگی max-width برابر با ۱۰۰٪ تنظیم شده باشد، تصویر در صورت لزوم کوچک خواهد شد، اما هرگز بزرگتر از سایز اصلی خود نمی‌شود:

مثال

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


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

مثال

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


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

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

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

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

در اینجا کد CSS مربوطه وجود دارد:

مثال

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


۲- اگر ویژگی background-size برابر با "۱۰۰٪ ۱۰۰٪" تنظیم شده باشد، تصویر پس زمینه کشیده خواهد شد تا کل ناحیه محتوا را پوشش دهد:

در اینجا کد CSS مربوطه وجود دارد:

مثال

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


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

در اینجا کد CSS وجود دارد:

مثال

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


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

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

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

مثال

/* 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 query ,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> را معرفی کرد، که به امکان تعریف بیش از یک تصویر را فراهم می کند.

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

ویژگی Internet Explorer / Edge Chrome Firefox Safari Opera
<picture> ۱۳ ۳۸٫۰ ۳۸٫۰ ۹٫۱ ۲۵٫۰

عنصر <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 queryهایی را می پذیرد که شما در فصل قانون @media در CSS می آموزید.

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

منابع آموزشی