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 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 and border