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

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

الخطوة الأولى - إضافة 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 响应式网页设计