Responsive images

Adding responsiveness to images in Tailwind CSS is very easy, but there is a trick here that we need to discuss.

By default, the image will not exceed the width of its parent - thanks to this, graphics in cards do not extend beyond the card, even though they are larger than it.

AI engine

Finished 13.09.2023 for Techify

Ut pretium ultricies dignissim. Sed sit amet mi eget urna placerat vulputate. Ut vulputate est non quam dignissim elementum. Donec a ullamcorper diam.

Read more

However, a problem will arise when the image is smaller than its parent.

For example, on certain screen widths (about the size of a tablet in vertical mode), our cards are arranged one below the other and occupy 100% of the width. You can then see that the image is too small to cover the entire space:

How to fix it?

Fortunately, this is easy to fix. Simply add .w-full class to the image, which will force the image to always occupy 100% of the available width (even if the image is smaller than the parent size).

        
            


    <img
      class="w-full rounded-xl"
      src="https://mdbootstrap.com/img/new/textures/small/148.jpg"
      alt="" />

    
        
    

Thanks to this, the image will never exceed the size of the parent (because it will always be 100% of its width, not more), but it will also not be able to be smaller, because the w-100 class will force it to stretch to its full width.

However, there is a drawback of this solution - if the image is much smaller than the size of the parent, then forcing it to stretch can spoil the quality.

But in the case of small differences in sizes, such as in the images in our cascading cards, this will not be visible so it's safe to use.

Nevertheless, keep this in mind when designing. Using the w-full class is safer because it prevents the bug with too small images. However, if you don't take care of the quality of the images, your users may see ugly pixelation. Choose wisely!