warum ist die Änderung am Bild so groß, Web Frontend?
das ist mit w-29
das ist mit w-28
1 Antwort
Du musst doch am besten wissen, welche Einstellungen Du im CSS für die Klasse "w-29 ...usw." bzw. "w-28 ...usw." definiert hast.
Ohne den übrigen Code zu sehen gehe ich mal davon aus, dass Du einfach per Copy und Paste den Code übernommen hast und nach Änderung des Klassennamens keine oder eine andere Definition für diesen className vorhanden ist. In diesem Fall nimmt der Browser einfach die Werte aus den übergeordneten Elementen oder Default-Werte.
class="ein_Name" ist lediglich ein Verweis auf eine mögliche (gemeinsame) Definition für die Eigenschaften gleichartiger Objekte.
Durch die Änderung des Klassennamens weist Du den Browser an, die Eigenschaften von "w-28 ...usw" für Dein Element (img) zu nutzen.
Du musst doch am besten wissen, welche Einstellungen Du im CSS für die Klasse "w-29 ...usw." bzw. "w-28 ...usw." definiert hast.
Nein ich hab es einfach hingeschrieben... um zu testen
https://tailwindcss.com/docs/object-fit
hab das halt hier gesehen
und das ist tailwind css kein normales css
na und? auch hinter Frameworks steckt ganz normaler Code.. Wenn Du ein Framework nutzt, solltest Du auch wissen was die dort definierten Dinge bewirken.
das Geheimnis der w-Nummer Klassen:
w-1 einer Breite von 0.25rem
rem ist eine dynamische Breitenangabe bezogen auf die Größe des für das für den äußersten Container (in der Regel der HTML-Tag) definierten Fonts.
Das bedeutet, wenn die Fontgröße 16px beträgt 0.25rem = 4px (Pixel)
Bei einer Fontgröße von 24px wären es entsprechend 0.25rem = 6px
nun kannst Du für die Tailwind-w-Klassen selber rechnen:
w-1 = 0.25rem * Fontgröße
w-4 = 1rem * Fontgröße
...
w-28 = 7 * Fontgröße
w-29 = 7,25 * Fontgröße
abhängig vom verwendeten Font und der gesetzten Fontgröße können sich somit beträchtliche Unterschiede für deine Bildbreite ergeben:
Font-Size 16:
w-1 = 4px
...
w-28 = 112px
w-29 = 116px
Font-Size 48:
w-1 = 12px
...
w-28 = 336px
w-29 = 348px
Nein ich hab es einfach hingeschrieben
bloß gut das es im Browser läuft und keinen Schaden anrichtet.... 😅
Wenn Du bei der Systemadministration auch einfach nur mal irgendwas "hinschreibst" ohne zu wissen was es tut könnte ein ganze Menge kaputtgehen.
Darum gibt es Dokumentationen, man muss sie nur lesen (und verstehen)
wie du ja bemerkt hast bin ich sehr neu (vor 2 tagen angefangen)
Font-Size 16:
<style>
html {
font-size: 16px;
}
</style>
hab das jetzt eingefügt und du hast ja geschrieben w-28 und w-29 haben ja 4 px unterschied aber das bild unterschied auf dem browser zeigt mehr als 4 px unterschied. Verstehe es nicht so ganz dann
ich hab auch nix geändert an irgendein fontsize nur lediglich w-1/2 gemacht und links und rechts container zubekommen mit gleicher width.
Ich kann nicht all Frameworks kennen und habe mich lediglich auf mein Wissen zu den üblichen "Maßeinheiten" in Styleshheets gestützt. Was Tailwind sonst noch so alles unsichtbar im Hintergrund initialisiert/ändert entzieht sich meinem Überblick, den ich bei meinem kurzen Exkurs in die Dokumentation gewinnen konnte.
vor 2 tagen angefange
Dabei stellt sich mir die Frage, weshalb Du überhaupt Tailwind verwendest, wenn Du das Framework nicht beherrschst . Das was Du da darstellen willst ließe sich wesentlich einfacher mit einfachen klassischen CSS-Definitionen realisieren .
Tailwind bringt Dir keinerlei Vorteile gegenüber "normalem" CSS, wenn Du nicht die Grundlagen von CSS beherrschst und nicht weißt wie die durch Taiwind definierten Klassen miteinander interagieren.
Ja ein Freund meinte nimm tailwind und svelte und ich so : ja ok
Die Geschichte
und das ist tailwind css kein normales css