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