CSS-Eigenschaft „width“: Ein vollständiger Leitfaden zur Webgrößenanpassung.

Wenn man mit der Gestaltung von Webseiten beginnt, ist eine der ersten Fragen, die sich stellt, wie man die Kontrolle übernimmt. das Größen- und Breitenverhalten der ElementeHier kommt das berühmte Anwesen ins Spiel. width von CSS, begleitet von ihren Kollegen height, max-width, min-width und Unternehmen. Die Beherrschung dieser Eigenschaften macht den Unterschied zwischen einem starren und einem flexiblen, professionellen Design aus.

Auch wenn es zunächst so aussieht, als würde man einfach nur „diese Breite und diese Höhe“ angeben, gibt es tatsächlich viele Nuancen: Wie Elemente auf interne Inhalte reagieren , was passiert, wenn etwas nicht passt, wie Bilder skaliert werden, welche minimalen und maximalen Grenzwerte es gibt und wie man das Seitenverhältnis beibehält, ohne etwas zu verzerren. Wir betrachten das Ganze in Ruhe, anhand klarer Beispiele und in verständlicher Sprache, damit Sie all das problemlos in Ihren Projekten anwenden können.

Was ist die Breiten-Eigenschaft in CSS und wie verhält sie sich?

Die Eigenschaft width Es dient dazu, zu definieren die Breite der Box eines Elementssei es ein divDies kann ein Bild, ein Absatz oder jedes andere Element sein, das Abmessungen akzeptiert. Dieser Wert kann in verschiedenen Einheiten (z. B. Pixel oder Prozent) angegeben werden und bestimmt, wie viel horizontalen Platz es innerhalb seines übergeordneten Containers einnimmt.

Wenn keine explizite Breite angegeben wird, ist ein Blockelement normalerweise sich automatisch ausdehnen, um die gesamte verfügbare Breite auszufüllen des Containers. Dies ist ein typisches Verhalten für Elemente wie <div> o <p>die standardmäßig die gesamte Zeile ausfüllen, es sei denn, ihre Breite wird durch CSS begrenzt.

Im Gegensatz dazu, wenn Sie einen Wert zuweisen widthSie etablieren eine spezifische oder relative Breite in Bezug auf das übergeordnete ElementWenn Sie beispielsweise Folgendes eingeben:

div { width: 300px; }

Das Feld wird 300 Pixel breit sein, vorausgesetzt, der Container bietet genügend Platz. Wenn Sie einen Prozentsatz verwenden, wie z. B. width: 50%;Das Element wird die halbe Breite des ContainerelementsAnpassung bei Größenänderungen des Behälters.

Es ist wichtig zu beachten, dass man dem Browser mit der Erzwingung einer festen Breite mitteilt, dass Die Box muss diese Abmessungen einhalten.selbst wenn der interne Inhalt größer ist. Wenn der Inhalt nicht passt, kommen andere Eigenschaften zum Tragen, wie zum Beispiel overflow um zu entscheiden, was mit diesem Überschuss geschieht.

Unterschiede zwischen Breite, Höhe und Autowert

Plus widthCSS hat die Eigenschaft height kontrollieren die Höhe eines ElementsBeide Eigenschaften akzeptieren Werte in absoluten (px) oder relativen Einheiten (%), aber ihr Standardverhalten ist nicht genau gleich.

Wenn einem Element weder ein Wert zugewiesen ist noch width ni heightDer Browser verwendet den impliziten Wert auto für beide ObjekteDas bedeutet, dass Breite und Höhe automatisch anhand des Elementtyps und des Inhalts berechnet werden. Der Browser versucht, die „logische“ Größe entsprechend dem Dokumentenfluss zu wählen.

In der Praxis verwenden width: auto; lassen Sie den Browser Passen Sie die Breite dem Kontext entsprechend an.Während height: auto; Dadurch wird die Höhe bei Bedarf an den Inhalt angepasst. Normalerweise müssen diese Werte nicht definiert werden, da sie dem Standardverhalten entsprechen.

Daran sollte man sich erinnern der Elementtyp (Block- oder Inline-Element) Dies beeinflusst die Interpretation dieser Dimensionen. Ein Inline-Element verhält sich beispielsweise nicht wie ein vollständiger Kasten, wenn ihm diese Dimensionen zugewiesen werden. width y heightund in vielen Fällen wird es notwendig sein, ihre display a inline-block o block damit es so reagiert, wie wir es erwarten.

Wenn Sie bestimmte Breiten- und Höhenangaben festlegen, schaffen Sie einen starren "Rahmen". Inhalte, die diese Maße überschreiten, können daher zu visuellen Überläufen , Überlappungen oder Scrollbalken führen, je nachdem, wie Sie die übrigen Eigenschaften konfigurieren.

Was passiert, wenn der Inhalt nicht passt? Überlauf und Überschwappen

Wenn Sie einem Element eine feste Breite und Höhe zuweisen , kann der Inhalt den zugewiesenen Platz überschreiten. Diese Diskrepanz kann dazu führen, dass Text über den Rand des Elements hinausläuft, unerwartete Scrollleisten erscheinen oder sogar Teile des Inhalts verdeckt werden.

Um dieses Verhalten zu steuern, wird die Eigenschaft verwendet. overflow, was anzeigt Wie soll der Browser reagieren, wenn der Inhalt den sichtbaren Bereich überschreitet? des Elements. Seine häufigsten Werte sind:

• sichtbar: ist der Standardwert; Inhalte, die nicht in das Feld passen, "laufen" weiterhin über das Feld hinaus und können andere Elemente überlappen.
• verstecktInhalte, die die festgelegte Größe überschreiten, werden abgeschnitten und sind nicht sichtbar; Scrollleisten werden nicht angezeigt.
• blätternScrollleisten (horizontal, vertikal oder beides) werden immer angezeigt, auch wenn der Inhalt ohne Überlauf passt.
• AutoScrollleisten werden nur dann angezeigt, wenn der Inhalt die Größe des Feldes tatsächlich überschreitet.

Wenn Sie verwenden overflow: visible; und Sie haben ein definiert feste Größe für die BoxDer überschüssige Inhalt wird über den nachfolgenden Inhalt gezeichnet, was oft ein unschönes Erscheinungsbild zur Folge hat. Daher ist es üblich, bei der Arbeit mit Feldern begrenzter Höhe oder Breite Folgendes zu verwenden: ... hidden o auto um diesen Inhalt zu enthalten.

Des Weiteren gibt es eine interessante Verwendung von overflow: auto; im Zusammenhang mit die schwebenden ElementeDiese Konfiguration kann den Container dazu zwingen, die Höhe der darin enthaltenen Elemente zu berücksichtigen, wodurch ein Zusammenfallen seiner Höhe verhindert und die Berechnung der endgültigen Größe des übergeordneten Elements verbessert wird.

Mindestbreite, Höchstbreite, Mindesthöhe und Höchsthöhe: Größenbeschränkungen

Anstatt eine völlig starre Größe mit width o heightEs ist wesentlich flexibler Mindest- und Höchstgrenzen festlegen die dem Design Luft zum Atmen geben. Genau dafür sind Eigenschaften da. min-width, max-width, min-height y max-height, die als Haltestellen fungieren.

Die Eigenschaften min-width y min-height zeigen die Mindestgröße, die ein Element haben kannSie werden auf die gleiche Weise ausgedrückt wie width y heightmit numerischen Werten und Einheiten (px, %, etc.) und, falls Prozentsätze verwendet werden, werden diese in Bezug auf den übergeordneten Container berechnet, genau wie bei der normalen Breite.

Ferner max-width y max-height Marcan die maximal zulässige Größe für Breite oder HöheDas Element kann verkleinert werden, wenn der verfügbare Platz begrenzt ist, es wird jedoch niemals das im Stylesheet definierte maximale Limit überschreiten.

Ein typisches Anwendungsbeispiel wäre:


div {
width: 100%;
min-width: 300px;
max-width: 800px;
height: 200px;
background: red;
}


Mit dieser Konfiguration versucht das Element Die gesamte verfügbare Breite nutzen durch width: 100%;Es wird jedoch niemals schmaler als 300 Pixel oder breiter als 800 Pixel sein. Wenn Sie die Größe des Browserfensters ändern, sehen Sie, wie sich das Feld innerhalb dieser Grenzen stufenlos anpasst.

Standard, min-width y min-height Sie sind 0 wertDas heißt, sie erfordern keine Mindestgröße, während max-width y max-height Sie haben den Standardwert. noneDas bedeutet, dass es, wenn Sie sie nicht ändern, keine Obergrenze gibt und das Element so groß werden kann, wie es sein Kontext zulässt.

Praktische Unterschiede zwischen Breite, Maximalbreite und Minimalbreite

Bei der Gestaltung moderner Layouts ist es wichtig, Folgendes gut zu verstehen: wann man es verwendet width und wann man wetten sollte max-width o min-widthDenn genau das entscheidet darüber, ob Ihr Design responsiv ist oder Ihnen nur Kopfzerbrechen bereitet.

Die Eigenschaft width eine genaue Größe festlegenDas Element behält diese Breite immer, es sei denn, Sie überschreiben sie später mit Media Queries. Wenn Sie beispielsweise Folgendes verwenden: width: 1000px; Wenn Sie die Seite auf einem Mobilgerät besuchen, werden Sie wahrscheinlich ein horizontales Scrollen feststellen und das Design wird völlig fehlerhaft dargestellt.

Stattdessen max-width etabliert a flexible Obergrenze. Zum Beispiel:

.contenedor { max-width: 600px; }

Mit dieser Regel überschreitet das Element nie eine Breite von 600 Pixeln. Ist der Container oder der Bildschirm schmaler, passt sich das Element problemlos an und verhindert so einen Überlauf. Dies ist ideal für Text- oder Hauptinhaltsblöcke, bei denen optimale Lesbarkeit bei gleichzeitiger Anpassung an kleinere Bildschirme gewünscht ist.

Für seinen Teil, min-width Es ermöglicht Ihnen, zu garantieren, dass ein Element Mach es nicht zu engBeispielsweise können Sie in Layouts mit Spalten verhindern, dass eine Karte oder ein Informationsblock auf sehr kleinen Bildschirmen gequetscht wird, indem Sie eine minimale lesbare Breite beibehalten.

Praktische Anwendungsmöglichkeiten von max-width im responsiven Design

Innerhalb dieser gesamten Gruppe von Eigenschaften, max-width Es ist wahrscheinlich eines der nützlichsten wenn es um responsives Design und Layouts geht, die sich an viele verschiedene Bildschirmgrößen anpassen müssen.

Eine sehr häufige erste Anwendung ist die Anwendung auf die Hauptcontainer der Seite . Zum Beispiel:


.main-content {
max-width: 1200px;
margin: 0 auto;
}


Dadurch dehnt sich der Inhalt auf großen Bildschirmen nicht unbegrenzt aus, was die Lesbarkeit (insbesondere bei längeren Texten) verbessert. Durch die Kombination mit margin: 0 auto;Sie zentrieren den Block elegant im Ansichtsfenster und lassen dabei ausgewogene Seitenränder.

Ein weiteres typisches Szenario sind Bilder, die sich stufenlos skalieren lassen müssen . Eine nahezu obligatorische Regel in jedem modernen CSS lautet:


img {
max-width: 100%;
height: auto;
}


Dadurch wird sichergestellt, dass das Bild nie breiter als sein Container ist (wodurch das Design nicht beeinträchtigt wird) und dank height: auto;Die ursprünglichen Proportionen bleiben unverzerrt erhalten. Es ist eine grundlegende Basis für Bilder für das Web optimieren ohne dass Hacks nötig sind.

In Layouts, die mit Flexbox oder CSS Grid, max-width Es dient außerdem als „Stopper“, um zu verhindern, dass bestimmte Elemente, wie z. B. Karten oder Module, auf großen Bildschirmen zu weit ausgedehnt werden. Zum Beispiel:


.tarjeta {
flex: 1;
max-width: 400px;
}


Auf diese Weise wird sichergestellt, dass sich die Karten den verfügbaren Platz teilen, aber nie eine angemessene Breite überschreiten, wodurch ein ausgewogenes ästhetisches Gesamtbild erhalten bleibt.

Die Attribute Breite und Höhe im img-Tag und ihre Beziehung zu CSS

Neben der Größensteuerung über CSS verfügen HTML-Bilder auch über die Attribute width y height auf dem Etikett selbst <img>Diese Attribute geben die Breite und Höhe an, in der das Bild auf der Seite angezeigt werden soll, standardmäßig in Pixeln.

Wenn Sie keines dieser Attribute angeben, zeigt der Browser das Bild in seinen Originalabmessungen an . Wenn Sie sie angeben, skaliert der Browser das Bild für die Anzeige auf diese Werte, ohne jedoch die eigentliche Datei auf der Festplatte zu verändern, sondern nur die Darstellung auf dem Bildschirm.

Wenn nur eines der beiden Attribute angegeben ist, width o height, der Navigator Die andere Dimension proportional anpassenDas Seitenverhältnis des Bildes wird beibehalten und Verzerrungen werden vermieden. Wenn Sie beides definieren, wird das Bild auf die exakt festgelegte Größe skaliert, was zu Verzerrungen führen kann, wenn die ursprünglichen Proportionen nicht eingehalten werden.

Es empfiehlt sich , Bilder nicht zu stark zu vergrößern , da sie sonst an Schärfe verlieren und unscharf werden. In solchen Fällen ist es ratsam, mit einem Bild in der passenden Auflösung zu arbeiten oder Vektorgrafiken wie SVG zu verwenden , die sich ohne Qualitätsverlust skalieren lassen.

Es gibt noch ein weiteres wichtiges Detail: Wenn Sie nicht width y height Auf dem Etikett <img>Der Browser weiß nicht im Voraus, wie viel Speicherplatz er für das Bild im Seitenablauf reservieren soll, was dazu führen kann, dass… Inhaltssprünge Wenn das Bild vollständig heruntergeladen ist. Dieser visuelle Effekt kann störend sein, insbesondere bei großen Bildern.

Ältere HTML-Versionen verwendeten ebenfalls Prozentsätze in den Breiten- und Höhenattributen aus dem Bild, wie width="100%"Damit das Bild die gesamte verfügbare Breite ausfüllt, ist dies heutzutage mit CSS und Elementen wie möglich möglich. <picture>Diese Technik ist etwas in Vergessenheit geraten, wird aber von Browsern weiterhin unterstützt.

Erweiterte Bildgrößensteuerung mit maximaler Breite

Eine sehr interessante Kombination ergibt sich, wenn sie verwendet werden Prozentsätze im Attribut width des Bildes und gleichzeitig der CSS-Regeln um zu verhindern, dass es über seine ursprüngliche Größe hinaus skaliert wird. Zum Beispiel:

<img src="graficos/en_rio_grande_800.jpg" style="max-width: 100%; height: auto;">

Dies bedeutet, dass das Bild niemals breiter als 100 % seines Containers sein sollte und die Höhe proportional angepasst wird. Dadurch wird verhindert, dass das Bild optisch über den Rand hinausragt und dass es bei einem sehr großen Container seine natürliche Größe überschreitet.

Bei vielen Projekten, insbesondere wenn viele Bilder unterschiedlicher Größen verwendet werden, stellt sich die Frage nach ob es besser ist, zu definieren width y height in HTML oder im CSS-StylesheetDie allgemeine Empfehlung lautet in der Regel, den visuellen Aspekt in CSS zu zentralisieren, um Inhalt und Darstellung zu trennen. Im speziellen Fall von Bildern, wenn jedes Bild eine andere Größe hat, kann es jedoch praktischer sein, deren Abmessungen direkt im Tag anzugeben, um übermäßig umfangreichen CSS-Code zu vermeiden.

Wenn Sie jedoch viele Bilder haben, die die gleiche Größe haben oder auf die Sie gemeinsame Stile anwenden möchten (abgerundete Ecken, Schatten usw.), dann ist es sinnvoll, dies im Stylesheet zu deklarieren, um eine sauberere und wiederverwendbare Kontrolle über das Design zu gewährleisten.

Intrinsische Größenwerte: Mindestinhalt, Maximalinhalt, Streckung und Anpassungsinhalt

CSS enthält außerdem eine Reihe spezieller Werte für „intrinsische“ Größen , mit denen sich die Breite eines Elements automatisch an seinen Inhalt anpassen lässt. Diese sind besonders in komplexeren Layouts nützlich.

Der Wert min-content zeigt an, dass das Element auf das Minimum verkleinern, das notwendig ist, um den Inhalt anzuzeigen, ohne ihn zu beschädigen.Etwas wie „so klein wie möglich, ohne dabei Wörter oder Inhalte abzuschneiden“. Es wird oft in Kombination mit Containern oder Rastersystemen verwendet.

Dagegen max-content macht das Element Erweitern Sie die Größe auf die maximale Größe, die Ihr Inhalt erfordert.ohne zusätzliche Einschränkungen. Anders ausgedrückt: Die Breite richtet sich danach, wie viel Platz der Inhalt für die vollständige Darstellung benötigt.

Der Wert stretch Es ist so konstruiert, dass die Box sich ausstrecken und den gesamten verfügbaren Platz ausfüllen in seinem Container, sofern die Layoutregeln dies zulassen. Dieser Ansatz entspricht sehr gut flexiblen Designs, bei denen Elemente so verteilt werden, dass Lücken automatisch gefüllt werden.

Schließlich gibt es noch die Funktion fit-content()deren Ziel es ist, eine Größe festzulegen, die so genau wie möglich auf den Inhalt abgestimmt ist, aber ohne einen festgelegten Maximalwert zu überschreitenAllerdings ist die Browserunterstützung eingeschränkt oder nur teilweise vorhanden. Daher empfiehlt es sich, die Kompatibilität zu überprüfen, wenn Sie es in Produktionsprojekten einsetzen möchten.

Ein vereinfachtes Beispiel für die Verwendung dieser Werte wäre:


.box {
background: indigo;
color: white;
height: 150px;
margin: 1rem 0;
}
.min { width: min-content; }
.max { width: max-content; }
.stretch { width: stretch; }


Mit dieser Konfigurationsart lässt sich leicht visualisieren, wie jeder Wert die Breite des Feldes anpasst , je nachdem, was es enthält. Dies ermöglicht die Erstellung komplexer Layouts, ohne dass manuelle Berechnungen erforderlich sind.

Seitenverhältnis: Das Verhältnis zwischen Breite und Höhe beibehalten

Eine weitere Schlüsseleigenschaft in der modernen Welt des Webdesigns ist aspect-ratio, was erlaubt Das Seitenverhältnis zwischen Breite und Höhe steuern eines Elements aus CSS, ohne beide Größenwerte explizit festlegen zu müssen.

Mit aspect-ratio Sie können sicherstellen, dass ein Bild, ein Video oder eine beliebige Box erhalten bleibt immer das gleiche Verhältnis (z. B. 16:9, 4:3 oder 1:1) auch bei responsiver Skalierung. Dies verhindert Verzerrungen und führt zu einem deutlich vorhersehbareren Verhalten.

Zu den akzeptierten Werten gehören auto und Anteile ausgedrückt als a / bzum beispiel aspect-ratio: 16 / 9;Alternativ können Sie auch eine Dezimalzahl verwenden, die das Verhältnis zwischen Breite und Höhe angibt.

Der Wert auto Es weist den Browser an, das passende Verhältnis automatisch zu berechnen, üblicherweise ausgehend von die intrinsischen Dimensionen des InhaltsAndererseits, wenn ein bestimmter Anteil angegeben wird (wie zum Beispiel 3 / 2Der Browser wird diese Beziehung nach Möglichkeit aufrechterhalten und die andere Achse anhand einer der beiden Achsen anpassen.

Diese Eigenschaft ist besonders nützlich bei der Arbeit mit Bildergalerien, Karten, eingebetteten Videos oder wiederverwendbaren Komponenten , da sie das visuelle Verhalten vereinheitlicht, ohne dass Umwege oder zusätzliche Container erforderlich sind. Falls Sie Schwierigkeiten haben, sich vorzustellen, wie sich Breite und Höhe bei Anpassung des Seitenverhältnisses verändern, können Sie jederzeit Online-Rechner verwenden, um mit verschiedenen Werten zu experimentieren.

Einheiten und bewährte Verfahren zur Definition von Größen

Bei der Erklärung width, height, max-width Und im Unternehmen kommt es nicht nur auf den Zahlenwert an, sondern auch die von Ihnen gewählte Einheit. Die häufigsten sind:

• px (Pixel): Sie ermöglichen eine sehr präzise Steuerung und sind leicht verständlich, sind aber in responsiven Umgebungen weniger flexibel.
• % (Prozent): Diese Werte werden im Verhältnis zur Größe des übergeordneten Elements berechnet, wodurch Designs ermöglicht werden, die besser an den Container angepasst sind.
• em / remEinheiten, die sich auf Schriftgrößen beziehen; nützlich, wenn Sie möchten Die Größe der Kästchen ändert sich je nach Typografie., Förderung der Barrierefreiheit.

Eine gängige Empfehlung ist die Verwendung von max-width statt width für viele globale Container, insbesondere in einem Ansatz Handy-firstAuf diese Weise kann der Inhalt bei kleinen Geräten reduziert werden, dehnt sich aber auf sehr breiten Bildschirmen nicht übermäßig aus.

Es lohnt sich auch, die Kombination im Auge zu behalten. Prozentangaben mit Polsterung und das BoxmodellWenn der übergeordnete Container nicht verwendet box-sizing: border-box;Rahmen und Innenabstände können dazu führen, dass die effektive Breite größer als erwartet ausfällt, was zu Überläufen oder horizontalen Scrollbalken führt.

Bei längeren Textelementen, Formularen oder zentralen Inhaltsboxen ist es oft hilfreich, eine Längenbegrenzung festzulegen. maximale Lesebreitezum Beispiel mit max-width: 600px; oder ein ähnlicher Wert. Dadurch werden die Textzeilen auf großen Bildschirmen nicht endlos lang, was die Benutzerfreundlichkeit verbessert.

Schließlich sollte man eine übermäßige Verwendung vermeiden. width mit festen Pixelwerten für wichtige Layoutblöcke. Diese Werte sollten reserviert werden für sehr spezifische Komponenten (Symbole, Schaltflächen, dekorative Elemente) und dem Rest des Designs Raum zu lassen, indem man mit Prozentwerten, Minimal- und Maximalwerten arbeitet, führt in der Regel zu robusteren Ergebnissen.

Zusammenfassend lässt sich sagen, dass man es eingehend wissen sollte. wie sie interagieren width, height, min/max-*, overflowintrinsische Größen und Seitenverhältnis Es ermöglicht Ihnen, robuste Layouts zu erstellen, die auf jedem Gerät gut aussehen und sich nahtlos anpassen. Sobald Sie diese Konzepte verinnerlicht haben, wird die Anpassung der Größe einzelner Elemente nicht mehr zum ständigen Kampf, sondern zu einem hilfreichen Werkzeug für die Gestaltung klarer, übersichtlicher und flüssiger Benutzeroberflächen.

In Verbindung stehender Artikel:

Wie man Bilder für die Verwendung auf Websites optimiert, um Geschwindigkeit und SEO zu verbessern

Holger

Leidenschaftlicher Autor über die Welt der Bytes und der Technologie im Allgemeinen. Ich liebe es, mein Wissen durch Schreiben zu teilen, und genau das werde ich in diesem Blog tun und Ihnen die interessantesten Dinge über Gadgets, Software, Hardware, technologische Trends und mehr zeigen. Mein Ziel ist es, Ihnen dabei zu helfen, sich auf einfache und unterhaltsame Weise in der digitalen Welt zurechtzufinden.