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-min/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.

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-min/blog/blog_7.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-min/blog/blog_7.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-min/blog/blog_7.jpg" alt="Image description">
                    <figcaption>Align right images</figcaption>
                  </figure>

Image also can add style like rounded-sm and border