TailwindCSS-hjälpklasser för `<img>`
TailwindCSS tillhandahåller flera hjälpklasser för att arbeta med <img>
-taggen. Här är några av de mest använda:
object-contain
: Denna klass ställer in bilden så att den passar i sin behållare samtidigt som den bibehåller sitt bildförhållande. Den kommer antingen att krympa eller expandera bilden efter behov för att se till att den passar i behållaren.object-cover
: Denna klass ställer in bilden så att den täcker hela behållaren samtidigt som den bibehåller sitt bildförhållande. Den kommer antingen att beskära bilden eller krympa den efter behov för att se till att den täcker behållaren.object-fill
: Denna klass ställer in bilden så att den fyller hela behållaren, utan att bibehålla sitt bildförhållande. Detta kan orsaka att bilden sträcks eller komprimeras för att passa i behållaren.object-none
: Denna klass ställer in bilden till sin naturliga storlek, utan någon ändring av storlek eller beskärning.object-center
: Denna klass centrerar bilden horisontellt och vertikalt i sin behållare.object-left
: Denna klass justerar bilden till vänster i sin behållare.object-right
: Denna klass justerar bilden till höger i sin behållare.object-top
: Denna klass justerar bilden till toppen av sin behållare.object-bottom
: Denna klass justerar bilden till botten av sin behållare.
Dessa klasser kan användas tillsammans med andra TailwindCSS-klasser för att ytterligare styla dina bilder, såsom att ställa in en specifik bredd eller höjd, lägga till ramar eller skuggor eller justera opaciteten.