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

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

مرحله اول - اضافه کردن 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