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

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

رقم المشاركة : ( 1 )
عضو vip
عضو vip

القلب المحب

إحصائيةالعضو

ذكر
عدد المساهمات : 4401
نقاط : 109203
شرح طريقة ظهور الصور متجاوبة تلقائياً لموقعك او مدونتك Responsive image Photof10
مُساهمةموضوع: شرح طريقة ظهور الصور متجاوبة تلقائياً لموقعك او مدونتك Responsive image


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


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

Shocked

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

الكود:
 </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>  

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


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

تريد .... التغيير , التميز , تطلب الابداع
نتشرف بكم وبزيارتكم في احلى منتديات همسات المطر

المصدر: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] - من قسم: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]



توقيع : القلب المحب




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

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

رقم المشاركة : ( 2 )
عضو فعال
عضو فعال

بنت الجزائر

إحصائيةالعضو

انثى
العمر : 25
عدد المساهمات : 581
نقاط : 88213
مُساهمةموضوع: رد: شرح طريقة ظهور الصور متجاوبة تلقائياً لموقعك او مدونتك Responsive image


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


يسلموووووو الاياااادى  [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



توقيع : بنت الجزائر





**

الــرد الســـريـع




**َ

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

-
» شرح تفصيلى للحصول على دومين لموقعك او مدونتك مجانا co.cc
» برنامج وضع علامات مائية او شعارات علي الصور بكل سهولة TSR Watermark Image Software v3
» طريقة عمل خاصية جميع الحقوق محفوظة لموقعك
» منع ظهور الصور في مُتصفح فايرفوكس
» أفضل طريقة لإضافة أزرار الفيس بوك وتويتر وجوجل بلس لموقعك