TailwindCSS-hjälpmedel för `<img>`

TailwindCSS tillhandahåller flera hjälparklasser för att arbeta med <img>-taggen. Här är några av de mest använda:

  • object-contain: Denna klass gör att bilden passar inom sin behållare samtidigt som den bevarar sitt bildförhållande. Bilden kommer att krympa eller förstoras vid behov för att passa inom behållaren.
  • object-cover: Denna klass gör att bilden täcker hela behållaren samtidigt som den bevarar sitt bildförhållande. Det kommer antingen att beskära bilden eller krympa den vid behov för att säkerställa att den täcker behållaren.
  • object-fill: Denna klass gör att bilden fyller hela behållaren, utan att bevara sitt bildförhållande. Detta kan orsaka att bilden sträcks eller komprimeras för att passa inom behållaren.
  • object-none: Denna klass ställer in bilden till dess naturliga storlek, utan någon storleksändring eller beskärning.
  • object-center: Denna klass centrerar bilden horisontellt och vertikalt inom sin behållare.
  • object-left: Denna klass justerar bilden till vänster inom sin behållare.
  • object-right: Denna klass justerar bilden till höger inom 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.