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.

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).

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!

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.