كيفية إنشاء: صورة تفاعلية

كيفية إنشاء صورة تفاعلية

الخطوة الأولى - إضافة 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