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

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

این کد 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'); 
  }
}

آزمایش کنید

عناصر <picture> HTML5

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> عنصر.