تجعل جميع صور موقعك او صور مدونتك متجاوبة تلقائيا مع جميع احجام الشاشات هو امر لا يحتاج الى العديد من الاكواد فقط قم بالدخول لمنصة تعديل الاكواد في قالبك وبعد ذلك قم بالبحث عن
</head>
وفوقه مباشرة ضع الكود التالي :
<style> img { max-width: 98% !important; } </style>
هذا الكود يعطي لجميع الصور التي تظهر في مدونتك او موقعك حد اقصي من العرض وهو 98% من المحيط الذي يشغله مثلا اذا كانت صورة عرضها 600px فعندما يصبح المحيط الذي تشغله الصورة أقل من 600px ستصبح الصورة خارج هذا الأطار لذا كان هذا الكود محافظاً عليها بداخل الأطار تماماً مهما بلغت نسبة تجاوب القالب الذي تستخدمه
كيف تجعل صورة معينة متجاوبة في العرض و الطول
كي تجعل صور معينة و محدد بعينها متجاوبة مع جميع احجام الشاشات يجب استخدام هذا الكود
استبدل رابط الصورة الملون بالاحمر برابط الصورة التي ترغب في تطبيق خاصية التجاوب عليها
ثم ضع الكود مكان ظهور الصورة
<div class="image-gallery">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_CY-wd6FqmNu2pmrMULbejcl71KTjSvbliozaiTDezNbBlhM5b6DX--Hpl-bBSIcJqPmreCuyke1NRlm8CRa2LlgRS_OWGHR1S6vxA0BkyrnBuHPuMJ-RP9R_S6YlGa2i5qLtnBndyxrvJwy--L57NJ-yxULuAK6hjoB-FATrRvYHTcYyqDfaVlPQgg/s400/GPS.gif" 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>
يمكنك التغير بدقه وسلامتكم
0 التعليقات :
إرسال تعليق