آموزش طراحی وب پاسخگو – تصاویر

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


با استفاده از ویژگی عرض

اگر widthویژگی روی درصد تنظیم شود و heightویژگی روی “خودکار” تنظیم شود ، تصویر پاسخگو خواهد بود و به صورت مقیاس بالا و پایین می شود:

مثال

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

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


با استفاده از ویژگی حداکثر عرض

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

مثال

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

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

مثال

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

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

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

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

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

در اینجا کد 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ویژگی برای “پوشش دادن” تنظیم شود ، تصویر پس زمینه مقیاس بندی می شود تا کل منطقه محتوا را پوشش دهد. توجه داشته باشید که مقدار “پوشش” نسبت ابعاد را حفظ می کند و ممکن است بخشی از تصویر پس زمینه بریده شود:

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

مثال

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

عنصر <تصویر> HTML

<picture>عنصر HTML انعطاف پذیری بیشتری در تعیین منابع تصویر به توسعه دهندگان وب می دهد.

بیشترین کاربرد این <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ویژگی اختیاری است و سوالات رسانه ای را که در قانون CSSmedia پیدا می کنید ، می پذیرد .

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.