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-sm 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:float-start text-center lg:text-start  ms-0 me-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:float-end text-center lg:text-end  me-0 ms-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-sm and border