ریسپانسیو کردن عکس

چطور می توان عکسها و تصاویر را ریسپانسیو کرد؟

برچسب ها: bootstrap کردن عکس ها ، بوت استرپ کردن عکسها ، واکنش گرا

برای ریسپانسیو کردن عکس کافی است عبارت زیر را در بخش style عکس اضافه کنیم:
max-width: 100%;height: auto;

مثلا:

<img style="max-width: 100% ; height: auto;" src="/Images/pic1.jpg" />

برچسب ها: ریسپانیو کردن تصویر ، ریسپانسیو کردن تصاویر ، Responsive ، عکس ریسپانسیو

روش دیگر این است که کد زیر را به انتهای فایل CSS اضافه کنید:

[code
img {
    max-width: 100%;
    height: auto;
    }
][/code]

روش دیگر: تگ <picture> برای عکس ریسپانسیو

در این روش باید برای یک عکس سایز های مختلف را در هاست خود ذخیره کرده باشیم سپس با توجه به اندازه سایز صفحه نمایش ، عکس مرتبط با سایز صفحه نمایش را به کاربر نشان دهیم.
مثال:

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="small.jpg">
   <img src="large.jpg" alt="This picture loads on non-supporting browsers.">
   <p> text. </p>
</picture>

سلام مهندس
من برای ریسپانس کردن تصویر پلاگین عضویت در خبرنامه راهنمایی میخوام.
سپاسگزارم