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