چگونه ایجاد می‌شود: تصاویر پاسخگو

چگونه تصاویر پاسخگو ایجاد کنیم

مرحله اول - اضافه کردن HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

مرحله دوم - اضافه کردن CSS:

اگر می‌خواهید که پاسخگویی تصویر بتواند هم بزرگتر و هم کوچکتر شود، CSS را width ویژگی تنظیم شده به 100%،height تنظیم شده به auto:

مثال

.responsive {
  width: 100%;
  height: auto;
}

آزمایش کنید

اگر می‌خواهید تصویر در صورت نیاز کوچکتر شود، اما هرگز بزرگتر از اندازه‌ی اصلی خود نشود، از max-width: 100%:

مثال

.responsive {
  max-width: 100%;
  height: auto;
}

آزمایش کنید

برای محدود کردن تصاویر پاسخگو به اندازه‌ی بزرگترین، از max-width ویژگی‌ها و مقادیر پیکسلی که انتخاب کرده‌اید:

مثال

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

آزمایش کنید

صفحات مرتبط

آموزش:تصویر CSS

آموزش:طراحی وب ریسپانسیو CSS