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

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

اینو فراموش نکن بخونی
رفع خطای Optimize images در جی تی متریکس

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

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

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

 

اینو فراموش نکن بخونی
چگونه خطای Add Expires headers در YSlow جی تی متریکس را رفع کنیم

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

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

 

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

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

 

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