إغلاق القائمة

كيف تجعل صوره مدونتك متجاوبه مع الهواتف والجوال بطريقه سهله 100%

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

    كيف تجعل صور مدونتك او موقعك متجاوبه تلقائيا :
    كي تجعل جميع صور موقعك او صور مدونتك تلقائيا مع جميع احجام الشاشات وهي امر لا يحتاج الي العديد من الاكواد فقط بالدخول الي المنصه بلوجر ومنها الي تعديل الاكواد في المظهر في القالب وقم بالبحث عن (<Head>) وفوقه مباشره ضع الكود التالي :
    <style> img { max-width: 98% !important; } </style>
    هذا الكود يعطي لجميع الصور التي تظهر في مدونتك او موقعك حد اقصي من العرض وهو 98% من المحيط الذي يشغله مثلا ، أذا كان صوره عرض مدونتك 600 Px فعندما يصبح المحيط التي تشغله الصوره أقل من 600 Px ستصبح الصوره خارج هذا الاطار لذلك فهذا الكود يحافظ علي المساحه والمحيط للصوره لتصبح متجاوبه جدا .
    كيف تجعل صوره المدونه اكثر تجاوبا في العرض والطول :
    كي تجعل صوره معينه في مدونتك اكثر تجاوبا تلقائيا مع جميع احجام الشاشات يجب استخدام هذا الكود التالي وقم باستبدال الكلام في الكود باللون الازرق الي الروزليوشن بتاع صورتك الخاصه ثم ضع الكود مكان ظهور الصوره :
     <div class="image-gallery">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" 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>


    وفي النهاية احب ان اقول لكم بذلك تستطيع تجاوب الصوره تلقائيه مع الجوال والاجهزه المكتبيه بطريقه سهله وسريعه واذا واجهتكم اي مشاكل لا تتردوا في الرسائل علي الماسنجر او البريد الالكتروني ولا تتردوا في دعمنا في الموقع لكي نستمر بالعمل الجاد وببذل اقصي جهد في اي شي حصري ودمتم بسلام امنين .

    شارك المقال
    TEQANE TECH
    كاتب ومحرر اخبار اعمل في موقع Teqane Tech .

    مقالات متعلقة

    إرسال تعليق