Images
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements).
Responsive images
This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

<img src="../src/img/project/project_1.jpg" class="max-w-full h-auto" alt="images title">
Image also can add style like rounded and border
Aligning images
Align images with float left, center or right.



<figure class="text-center mb-6">
<img class="max-w-full h-auto mx-auto" src="../src/img/project/project_1.jpg" alt="Image description">
<figcaption>Align center images</figcaption>
</figure>
<figure class="lg:ltr:float-left lg:rtl:float-right text-center lg:ltr:text-left lg:rtl:text-right ltr:ml-0 rtl:mr-0 ltr:mr-7 rtl:ml-7 mb-7">
<img class="max-w-full h-auto mx-auto" src="../src/img/project/project_2.jpg" alt="Image description">
<figcaption>Align left images</figcaption>
</figure>
<figure class="lg:ltr:float-right lg:rtl:float-left text-center lg:ltr:text-right lg:rtl:text-left ltr:mr-0 rtl:ml-0 ltr:ml-7 rtl:mr-7 mb-7">
<img class="max-w-full h-auto mx-auto" src="../src/img/project/project_3.jpg" alt="Image description">
<figcaption>Align right images</figcaption>
</figure>
Image also can add style like rounded and border