جاري التحميل
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع

المتواجدون الآن ؟
ككل هناك 13 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 13 زائر :: 2 عناكب الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 488 عُضو.
آخر عُضو مُسجل هو asdsafsdf فمرحباً به.

أعضاؤنا قدموا 9783 مساهمة في هذا المنتدى في 1845 موضوع

منتديات تقنيات :: جاليري استايلات التومبلايت والقوالب والاكواد :: 

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

avatar
في هذا الشرح سنقدم لكم كيفية عمل او جعل الصور في موقعك او مدونتك او المنتدى الخاص بك متجاوبة لجميع الاجهزة وبدون اي اخطاء برمجية وبعدما ظهرت الاجهزة اللوحية و الهواتف الذكية اصبحت خاصية التجاوب (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>  


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


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


m13
avatar
بارك الله فيك

لكن في أي قالب من قوالب التومبيلات نضع الأكواد ؟
avatar
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
سلمت اناملك الذهبيه
دائما بأنتظار جديدك الشيق
 لك خالص احترامي وتقديري
avatar
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
مواضيع مماثلة

سجل دخولك أو انشئ حساب لترك رد

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

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


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

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول