مدت زمان تقریبی مطالعه : < 1 دقیقه

حتما تا حالا شده که بخواهید عکسی در بخشی از سایت استفاده کنید و مشکل نمایش عکس در موبایل و تبلت را داشته باشید . یعنی عکس در نسخه وب سایت به درستی نمایش داده می شود اما در نسخه موبایل و تبلت خودکار فیکس نمی شود

اینو فراموش نکن بخونی
لیست خطاهای رایج وردپرس

امروز می خواهم برای شما قطعه کدی در سی اس اس را آموزش بدهم که اگر شما این قطعه کد در کلاس عکس و یا تک img به صورت style قرار دهید به صورت خودکار عکس ریسپانسیو خواهد شد .

قرار دادن کد ریسپانسیو عکس در تگ img :

<img src="nature.jpg" alt="Nature" style="max-width: 100%;height:auto;">

 

اینو فراموش نکن بخونی
محدود کردن کاراکترهای عنوان نوشته ها و محصولات

البته شما می توانید به عکس های خود کلاس ریسپانسیو داده :

<img src="nature.jpg" alt="Nature" class="responsive";>

 

و بعد در فایل css خود این کلاس را اضافه کنید :

.responsive {
width: 100%;
height: auto;
}

 

درحال ارسال
امتیاز دهی کاربران
( رای)