Bilder formatieren

Bilder formatieren und ausrichten

Bilder in Texten einbetten

<div class="text-center">
   <drupal-media class="w-3/5 inline-block" data-entity-type="media" data-entity-uuid="d81c4bc4-9afa-4213-b81e-751c0f78e071">&nbsp;</drupal-media>
</div>

Welche Werte außer w-3/5 können Sie angeben?

Tailwind hat ein ganzes Set an Width Utilities:

• Brüche (Fraction-based):

  • w-1/2 → 50 %

  • w-1/3, w-2/3 → 33 % / 66 %

  • w-1/4, w-2/4, w-3/4 → 25 %, 50 %, 75 %

  • w-1/5 … w-4/5 → 20 %, 40 %, 60 %, 80 %

  • w-1/6, w-2/6 … bis w-5/6

• Vollbreite-Klassen:

  • w-full → 100 %

  • w-auto → automatische Breite nach Inhalt

• Feste Werte (Default-Scale):

  • w-64 → 16rem (256px)

  • w-80 → 20rem (320px)

  • w-96 → 24rem (384px)
    (ganze Skala siehe Tailwind Docs: Width)

• Maximalwerte (nützlich für Bilder):

  • max-w-xs → ~20rem (320px)

  • max-w-md → 28rem (448px)

  • max-w-lg, max-w-xl, max-w-2xl, …

  • max-w-full → maximal 100 % der Containerbreite

• Prozentuale Breite über w-[…] (Arbitrary Values):

  • w-[30%] → exakt 30 %

  • w-[750px] → exakt 750 Pixel