When using tailwindcss 3, I found that setting a max width and height for an image required the following code:
.img_preview_wrapper {
@apply border-2 m-2 border-gray-400 rounded-lg md:w-11/12 xl:w-8/12;
height: auto;
}
This worked well for larger images, but smaller images did not display correctly and appeared broken.
How can this issue be fixed?
UPDATED CODE : Using the following class definition:
.img_preview_wrapper {
@apply border-2 m-1 p-1 border-gray-400 rounded-lg md:w-11/12 xl:w-8/12;
}
I achieved a similar view to what I desired:
https://i.sstatic.net/ObvWV.png
However, when showing a border around the image, how can I remove the empty space inside the border on the right side of the image?