منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


شرح طريقة ظهور الصور متجاوبة تلقائياً لموقعك او مدونتك Responsive image

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

شرح طريقة ظهور الصور متجاوبة تلقائياً لموقعك او مدونتك Responsive image

مُساهمة من طرف البراق في 17/07/16, 04:53 pm

في هذا الشرح سنقدم لكم كيفية عمل او جعل الصور في موقعك او مدونتك او المنتدى الخاص بك متجاوبة لجميع الاجهزة وبدون اي اخطاء برمجية وبعدما ظهرت الاجهزة اللوحية و الهواتف الذكية اصبحت خاصية التجاوب (Responsive) في المواقع احد اهم المميزات التي تتميز بها ، بل ان التجاوب أصبح صفة لا غني عنها للمواقع الحديثة ، وفي هذا الشرح سيكون موضوعنا عن طريقة الحفاظ علي تجاوب جميع الصور داخل مدونتك او موقعك سواء كنت تستخدم قالب متجاوب او لا



كيف تجعل جميع صور مدونتك او موقعك متجاوبة تلقائيا
كي تجعل تجعل جميع صور موقعك او صور مدونتك متجاوبة تلقائيا مع جميع احجام الشاشات هو امر لا يحتاج الى العديد من الاكواد فقط قم بالدخول لمنصة تعديل الاكواد في قالبك وبعد ذلك قم بالبحث عن

الرمز:
    </head>  


وفوقه مباشرة ضع الكود التالي :


الرمز:
<style> img { max-width: 98% !important; } </style>


هذا الكود يعطي لجميع الصور التي تظهر في مدونتك او موقعك حد اقصي من العرض وهو 98% من المحيط الذي يشغله
مثلا اذا كانت صورة عرضها 700px فعندما يصبح المحيط الذي تشغله الصورة أقل من 700px ستصبح الصورة خارج هذا الأطار لذا كان هذا الكود محافظاً عليها بداخل الأطار تماماً مهما بلغت نسبة تجاوب القالب الذي تستخدمه

كيف تجعل صورة معينة متجاوبة في العرض و الطول
كي تجعل صور معينة و محدد بعينها متجاوبة مع جميع احجام الشاشات يجب استخدام هذا الكود
استبدل رابط الصورة برابط الصورة التي ترغب في تطبيق خاصية التجاوب عليها
ثم ضع الكود مكان ظهور الصورة

كي تجعل صور معينة و محدد بعينها متجاوبة مع جميع احجام الشاشات يجب استخدام هذا الكود
استبدل رابط الصورة برابط الصورة التي ترغب في تطبيق خاصية التجاوب عليها
ثم ضع الكود مكان ظهور الصورة

الرمز:
<div class="image-gallery">  <img src="http://www.iq-here.com/up/do.php?img=14585" alt="" /></div>  


بعد ذلك ضع الكود التالي داخل قالب مدونتك او موقعك
افتح قالب مدونتك او ملف موقعك ثم ابحث عن

الرمز:
</head>


و فوقه مباشرة ضع هذا الكود


الرمز:
<style>.image-gallery{  width:98%;  }@media screen and (max-width: 1800px) {   .image-gallery{  width:98%;  }}/* -- Small screen size -- */@media screen and (max-width: 800px) {  .image-gallery{    width:90%;  }}/* Micro screen size*/@media screen and (max-width: 800px) {  .image-gallery{     -webkit-column-count: 1;  -webkit-column-gap: 0px;       -moz-column-count: 1;     -moz-column-gap: 0px;            column-count: 1;          column-gap: 0px;    }  .image-gallery{    width:95%;  }    .image-gallery img{ /* fills 100% width on small screen */    width:100%;    height:auto;  }}</style>  


وسيتم التجاويب ع الصورة المعينة التي تم تحديدها من قبلك


تحياتي للجميع

البراق
عضو نشيط


الجنس : ذكر
عدد المساهمات : 109
التقييم : 25
تاريخ التسجيل : 14/04/2016
اوسمتي : :3:4:3

معاينة صفحة البيانات الشخصي للعضو http://raad2.montadalitihad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: شرح طريقة ظهور الصور متجاوبة تلقائياً لموقعك او مدونتك Responsive image

مُساهمة من طرف JAR7 في 17/07/16, 06:26 pm

شرح وافي عوافي يارب
جزاك الله خيرا
ويعطيك العافية



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى