CODEWITHSUNDEEP
tailwind-css
Petro Gromovo
Petro Gromovo

Reputation: 2171

How to show small image in its original size?

On site with tailwindcss 3.1 I define class

.view_image {
    @apply border-2 border-gray-300 p-1 rounded-lg w-64;
    height: auto;
 }

and it is looking good for most of images, but if image is small (less then w-64) the image looks ugly. If there is a way for this image if it is less then w-64 to show it in its original size ?

Thanks in advance!

Upvotes: 1

Views: 625

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14193

Change w-64 into max-w-[16rem] - it is max-width property. This way images will stretch to its original size, but if their width more than 16rem, it will stop stretching and has width of 16rem. Tailwind has not this value for Tailwind, as you can see here, so either use arbitrary value max-w-[16rem] or extend configuration file

DEMO

Upvotes: 2

Related Questions