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.

images title
                      
                        <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.

Image description
Align center images
Image description
Align left images
Image description
Align right images
                      
                        <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