دوره مقدماتی تا پیشرفته بوت استرپ 4 Bootstrap کار با تصاویر image

Описание: در خدمت شما عزیزان هستیم با آموزش بوت استرپ 4.در این قسمت از آموزش قصد داریم روش کار با تصاویر در بوت استرپ رو با هم کار کنیم.در ابتدا با استفاده از کلاس img-fluid. روی ریسپانسیو کردن تصویر یا واکنش گرا کردن تصویر (Responsive Images) کار خواهیم کرد.با استفاده از کلاس img-fluid. اندازه mas-width:100% وheight:auto را به عکس می دهیم که این به مرورگر می گوید که تصویر را بزرگتر از ظرف یا اندازه اصلی خود پنجره مرورگر گسترش ندهد و اگر پنجره مرورگر باریک تر از عرض تعیین شده تصویر باشد ، تصویر را کوچک می کند به این خاطر که صفحه نمایش دیوایس های امروزی مانند گوشی های موبایل یا تبلت ها سایزهای مختلفی دارند، به همین دلیل از این کلاس برای هماهنگ کردن سایز تصویر با صفحه مورد نظر استفاده می کنیم .بخش بعدی با استفاده از کلاس rounded. گوشه های تصاویر را گرد می کنیم و با استفاده از کلاس rounded-circle تصویر را گرد میکنیم.در گام آخر نیز یاد خواهید گرفت چگونه با استفاده از کلاس img-thumbnail. عکس را به صورت بند انگشتی درآورید.