آموزش ریسپانسیو کردن عکس ها

23 مهر 1398 - 15 اکتبر 2019 0 بررسی 578بازدید آرت دیزاین

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

امروز می خواهم برای شما قطعه کدی در سی اس اس را آموزش بدهم که اگر شما این قطعه کد در کلاس عکس و یا تک 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;
}

آموزش ریسپانسیو کردن عکس ها | طراحی سایت آرت دیزاین