Wichtigste Erkenntnisse
- object-fit: cover schneidet ein img innerhalb einer festen Box zu und bewahrt dabei die intrinsische Semantik.
- overflow: hidden schneidet ein positioniertes Bild an der Boxgrenze zu und eignet sich gut für benutzerdefinierte Fokusverschiebungen.
- background-size: cover eignet sich für dekorative Bilder, die keinen Alternativtext benötigen.
Zuschneiden in HTML und CSS bedeutet, einzuschränken, was Nutzer sehen, nicht das Quellbild neu zu schreiben. Jede Technik bietet eine andere Balance aus Semantik, Responsivität, Formflexibilität und Browseraufwand.
Worauf es besonders ankommt
- clip-path erzeugt nicht-rechteckige Ansichten, lässt jedoch das ursprüngliche Layout und die Übertragungsgröße unangetastet.
- Das picture-Element kann Zuschnitte redaktionell gestalten, anstatt überall dieselbe Komposition zu erzwingen.
Ein Zuschnitt kann eine Ansicht oder eine neue Datei sein
Ein Browser-Zuschnitt erzeugt normalerweise ein Sichtfenster. Das Quellbild wird decodiert, angeordnet und gemalt, aber ein Teil davon wird durch eine Box, eine Maske oder eine Clipping-Grenze verdeckt. Die verdeckten Pixel gehören weiterhin zur Ressource. Das ist nützlich, wenn ein Bild mehrere temporäre Darstellungen benötigt, etwa eine quadratische Karte, ein breites Banner und einen runden Avatar.
Ein generierter Zuschnitt ist ein eigenständiges Bild, dessen Pixelmaße der gewünschten Ausgabe entsprechen. Er kann die Übertragungsgröße reduzieren, verhindern, dass verdeckte Bereiche heruntergeladen werden, und Feeds, E-Mail-Vorlagen, Downloads oder anderen Systemen stabile Maße liefern. Entscheiden Sie sich für eines dieser Modelle, bevor Sie eine CSS-Technik wählen, denn optisch identische Ergebnisse können sehr unterschiedliche Sicherheits-, Performance- und Wiederverwendungseigenschaften haben.
Darstellungszuschnitt
Verwenden Sie CSS, wenn dieselbe Quelle eine reversible Ansicht benötigt, die sich mit dem Layout ändern kann.
Dauerhaftes Derivat
Generieren Sie eine Datei, wenn ihre Bytes, Maße, Zusammensetzung oder nachgelagerte Wiederverwendung Teil des Produktvertrags sind.
object-fit für semantische Bilder verwenden
Für ein bedeutungstragendes Bild liefert ein img-Element meist das sauberste Markup, da es Alternativtext, intrinsische Maße, Ladeverhalten und responsive Quellauswahl beibehält. Geben Sie dem Container eine feste Breite und Höhe oder ein Seitenverhältnis, lassen Sie das Bild diese Box ausfüllen und verwenden Sie object-fit: cover. Der Browser skaliert das Bild verzerrungsfrei, bis die Box vollständig bedeckt ist, und blendet den Überschuss entlang einer Achse aus.
object-position bestimmt, welcher Teil diesen Zuschnitt übersteht. Der Standardwert center genügt nur, wenn Motive durchgängig zentriert sind. Prozentwerte wie 70 % 30 % können ein außermittiges Gesicht oder Produkt bewahren, während Längenangaben einen festen Versatz in einer kontrollierten Komponente ausdrücken können. Testen Sie die Position bei jedem Zielverhältnis, denn eine Fokuseinstellung, die in einer breiten Karte funktioniert, kann dazu führen, dass dasselbe Motiv in einer hohen Karte zugeschnitten wird.
<figure class="profile-card">
<img
class="profile-card__photo"
src="ada.webp"
alt="Ada Lovelace seated beside a writing desk"
width="800"
height="1000"
/>
<figcaption>Ada Lovelace</figcaption>
</figure>
<style>
.profile-card__photo {
inline-size: 12rem;
aspect-ratio: 1;
object-fit: cover;
object-position: 50% 30%;
border-radius: 50%;
}
</style>cover
Füllt das Ziel aus und schneidet den Überschuss ab, während das Seitenverhältnis der Quelle erhalten bleibt.
contain
Zeigt das gesamte Bild, kann aber ungenutzten Raum lassen und ist daher kein Zuschnitt.
object-position
Verschiebt die Quelle innerhalb ihrer Content-Box und bestimmt, an welcher Kante Pixel verloren gehen.
aspect-ratio
Legt die bevorzugte Form der Box fest; object-fit bestimmt, wie das Bild diese Box ausfüllt.
Kontrollierte Versätze mit einem Overflow-Wrapper aufbauen
Ein Overflow-Wrapper bietet mehr direkte Kontrolle, wenn object-position nicht ausdrucksstark genug ist. Platzieren Sie das Bild innerhalb eines relativ positionierten Elements mit festen Abmessungen und overflow: hidden, und verschieben oder skalieren Sie das Bild dann darin. Dieses Muster unterstützt vom Editor definierte Verschiebungen, Zoomsteuerungen und Fokusbereiche, die nicht mit einer einfachen gravity-Einstellung wie top, center oder bottom übereinstimmen.
Halten Sie das Koordinatenmodell unabhängig vom aktuellen Viewport. Feste Pixelverschiebungen funktionieren oft nicht mehr, wenn der Wrapper responsiv wird, während normalisierte Verschiebungen für jede Größe neu berechnet werden können. Berücksichtigen Sie beim Messen des Bildes auch Transformationen: Ein verschobenes oder skaliertes Bild kann korrekt aussehen, obwohl sich sein untransformierter Layout-Rahmen an anderer Stelle befindet. Reservieren Sie den Zielbereich im Voraus, damit sich umliegender Inhalt beim Laden nicht verschiebt.
Hintergründe dekorativem Bildmaterial vorbehalten
Ein CSS-Hintergrund mit background-size: cover verhält sich ähnlich wie object-fit: cover, gehört aber zur Dekoration des Elements und nicht zum Dokumentinhalt. Das macht ihn geeignet für Texturen, dekorative Hero-Grafiken oder Bildmaterial, dessen Bedeutung bereits durch begleitenden Text vermittelt wird. background-position bietet Fokuskontrolle, und separate Media Queries können unterschiedliche Ressourcen oder Positionen auswählen.
Verschieben Sie ein informatives Foto nicht nur in einen Hintergrund, um das Zuschneiden zu vereinfachen. Hintergrundbilder akzeptieren keinen Alternativtext und können in Szenarien mit hohem Kontrast, beim Drucken oder mit benutzerdefinierten Stylesheets verschwinden. Wenn das Bild eine Person, ein Produkt, ein Diagramm oder ein Ereignis vermittelt, behalten Sie ein img- oder picture-Element bei und verwenden Sie CSS für dessen Darstellung. Die semantische Entscheidung sollte vor der gestalterischen Entscheidung stehen.
Box-Geometrie von Clipping-Geometrie trennen
Die Eigenschaft aspect-ratio erzeugt ein responsives Rechteck ohne die alte Berechnung mit Padding in Prozent. Sie schneidet nicht von selbst zu. Das Element benötigt weiterhin object-fit, overflow oder eine andere Zuschneideregel, um zu entscheiden, was passiert, wenn Quell- und Zielverhältnis voneinander abweichen. Ältere, auf Padding basierende Techniken können in Legacy-Code erhalten bleiben, aber die Kombination mit einer expliziten Höhe führt oft zu verwirrendem Größenverhalten.
clip-path erzeugt Kreise, Polygone und andere nicht rechteckige Ansichten. Es verändert den gezeichneten Umriss, ohne eine neu geformte Bilddatei zu erzeugen, und die ursprüngliche rechteckige Ressource wird weiterhin vollständig übertragen und decodiert. Lassen Sie genügend Raum für Fokusindikatoren und Bildunterschriften, und testen Sie die Form bei kleinen Größen. Ein dekoratives Sechseck, das in Desktop-Größe markant wirkt, kann bei kleiner Darstellung ein Gesicht verdecken oder in einer kompakten Liste unkenntlich werden.
Kompositionen redaktionell gestalten, statt einen Zuschnitt zu strecken
Responsive Auflösungsauswahl und Art Direction lösen unterschiedliche Probleme. Ein srcset bietet normalerweise dieselbe Bildkomposition in mehreren Pixeldichten oder Breiten an. Ein picture-Element kann stattdessen unterschiedliche Quelldateien für verschiedene Medienbedingungen auswählen und so ein nahes Porträt auf dem Smartphone und eine breitere, kontextreichere Szene auf dem Desktop ermöglichen. Das untergeordnete img-Element liefert weiterhin den gemeinsamen Alternativtext und den Fallback.
Art Direction ist vorzuziehen, wenn kein einzelner Zuschnitt die beabsichtigte Bildaussage über alle Seitenverhältnisse hinweg bewahrt. Speichern Sie die redaktionelle Entscheidung als Asset-Metadaten, statt sie in einem komponentenspezifischen CSS-Offset zu verstecken. So bleibt die Entscheidung in einer anderen Oberfläche wiederverwendbar und lässt sich überprüfen, wenn sich Layouts ändern. Bewahren Sie das Original zusammen mit den freigegebenen Varianten auf, damit eine künftige Platzierung nicht gezwungen ist, eine bereits zugeschnittene Datei erneut zuzuschneiden.
Derivate erzeugen, wenn der Zuschnitt dauerhaft bestehen muss
Erstellen Sie für stabile Platzierungen ein serverseitiges Derivat mit expliziter Breite, Höhe, Ausgabeformat und Zuschnittkoordinaten oder Fokusabsicht. Ein positionsbasierter Zuschnitt ist reproduzierbar; ein durch Saliency oder Entropie gesteuerter Zuschnitt ist nur ein Kandidat. Bewahren Sie das Original, protokollieren Sie die Zuschnittentscheidung, und überprüfen Sie wichtige Kompositionen, bevor Sie sie über Feeds, Downloads und Platzierungen mit fester Größe veröffentlichen.
Ein expliziter Zuschnittrahmen kann stattdessen den genauen Quellbereich anhand seiner Eckkoordinaten in Pixeln oder Prozent beschreiben. Prüfen Sie, wie der gewählte Prozessor einen expliziten Rahmen mit anderen Größenparametern kombiniert, denn manche behandeln die Koordinaten als maßgeblich und ignorieren eine separat angeforderte Breite und Höhe. Wird zusätzlich eine bestimmte Endgröße benötigt, verwenden Sie einen anschließenden Größenänderungsschritt. Speichern Sie Ausgaben unter versionierten oder inhaltsabgeleiteten Pfaden, damit eine geänderte Zuschnittrichtlinie keine veralteten Dateien unter einem alten Cache-Schlüssel zurücklässt.
Eine bekannte Box füllen
Verwenden Sie eine Größenänderung mit Füllen und Zuschneiden mit expliziter Breite, Höhe und einer geeigneten gravity- oder Fokuseinstellung, wenn der Platzierungsvertrag ein exaktes Seitenverhältnis vorgibt.
Einen freigegebenen Rahmen einhalten
Verwenden Sie explizite Zuschnittkoordinaten, wenn ein Editor oder eine Anwendung den Quellbereich bereits ausgewählt hat.
Die Masterdatei aufbewahren
Bewahren Sie die Quelldatei ohne Zuschnitt auf, damit neue Seitenverhältnisse und korrigierte Kompositionen ohne kumulativen Qualitätsverlust erzeugt werden können.
Den Zuschnitt als Inhalt testen, nicht nur als CSS
Erstellen Sie ein Set von Testdateien mit Panoramen, hochformatigen Smartphone-Fotos, winzigen Bildern, transparenten Dateien, außermittigen Motiven, Text nahe den Rändern und Quellen mit ungewöhnlicher Ausrichtung. Prüfen Sie die kleinsten und größten responsiven Breakpoints, Browser-Zoom, hochauflösende Displays und langsames Laden. Automatisierte Prüfungen können Ausgabeabmessungen und Layout-Stabilität bestätigen, aber eine visuelle Überprüfung ist weiterhin nötig, um abgeschnittene Gesichter, fehlende Beschriftungen oder irreführende Kompositionen zu erkennen.
Zuschneiden behebt keine Barrierefreiheitsprobleme und entfernt keine sensiblen Inhalte. Der Alternativtext sollte beschreiben, was in der angezeigten Ansicht noch bedeutungsvoll ist, während dekorative Bilder einen passenden leeren Alternativtext haben oder reine CSS-Dekoration bleiben sollten. Verwenden Sie niemals overflow, object-fit oder clip-path, um persönliche Informationen, Dokumentränder oder unbeteiligte Personen im Hintergrund zu verbergen, da Nutzer weiterhin die vollständige Quelle abrufen können. Erzeugen Sie ein bereinigtes Derivat, wenn Pixel tatsächlich entfernt werden müssen.
Wissenswerte technische Details
- object-fit ändert, wie die Pixel eines Bildes in die Content-Box eines Elements abgebildet werden; es erzeugt weder eine kleinere Bilddatei noch reduziert es die Anzahl der übertragenen Quell-Bytes.
- clip-path und overflow hidden wirken sich nur auf die Darstellung aus, während das Originalbild weiterhin vorhanden bleibt und das Laden, die Speichernutzung, die Barrierefreiheit und die intrinsische Größe weiterhin beeinflussen kann.
- Die Eigenschaft object-position kann Prozentwerte oder Längenangaben verwenden, um einen Fokusbereich zu erhalten, doch eine einzelne Fokusposition funktioniert möglicherweise nicht gleichermaßen für Quer- und Hochformat-Zielverhältnisse.
- Die Eigenschaft aspect-ratio legt ein bevorzugtes Boxverhältnis fest, schneidet das Bild jedoch nicht selbst zu; overflow und object-fit bestimmen, was geschieht, wenn das Quellverhältnis abweicht.
- Ein transformiertes oder zugeschnittenes Bild kann beim Herunterladen weiterhin das vollständige Original offenlegen. CSS-Zuschnitt darf daher niemals verwendet werden, um sensible Randinhalte zu entfernen.
- Responsive Layouts benötigen häufig einen Fokuspunkt statt eines festen Pixel-Versatzes, da sich das sichtbare Rechteck mit der Breite des Containers ändert.
Ein praxisnaher Ansatz
- 1
Entscheiden Sie, ob der Zuschnitt dekorativ, semantisch, herunterladbar oder nachgelagert weiterverwendet wird.
- 2
Speichern Sie die beabsichtigte Fokusposition oder die Koordinaten getrennt vom flüchtigen Komponentenzustand.
- 3
Erzeugen Sie geprüfte Derivate für stabile Platzierungen und bewahren Sie die Quelle für künftige Varianten auf.
- 4
Testen Sie Tastaturfokus, Alternativtext, responsive Abmessungen und ungewöhnliche Seitenverhältnisse der Quelle.
Architekturgrenze
CSS schneidet nur die dargestellte Ansicht zu; es erzeugt kein kleineres Derivat und entfernt keine verborgenen Pixel aus der übertragenen Datei. Verwenden Sie serverseitige Verarbeitung, wenn Bytes, exportierte Abmessungen oder die Weiterverwendung nachgelagerter Systeme wichtig sind.
Häufig gestellte Fragen
Verringert object-fit: cover die Downloadgröße eines Bildes?
Nein. Es ändert nur, wie das heruntergeladene Bild innerhalb seiner Box dargestellt wird. Verwenden Sie ein korrekt dimensioniertes Derivat und responsive Bildquellen, wenn die Übertragungsgröße wichtig ist.
Wann sollte ein Bild einen CSS-Hintergrund statt eines img-Elements verwenden?
Verwenden Sie einen Hintergrund, wenn das Bild dekorativ ist und keine Information enthält, die einen Alternativtext erfordert. Aussagekräftige Fotografien, Diagramme, Produkte und Porträts sollten normalerweise img- oder picture-Elemente bleiben.
Kann ein einzelner object-position-Wert für jedes responsive Seitenverhältnis funktionieren?
Manchmal, aber das ist nicht garantiert. Eine normalisierte Fokusposition ist wiederverwendbar, doch sehr unterschiedliche Quer- und Hochformat-Fenster können weiterhin separate, künstlerisch angepasste Zuschnitte erfordern.
Ist clip-path sicher, um vertrauliche Teile eines Bildes zu entfernen?
Nein. clip-path ändert nur den sichtbaren Darstellungsbereich. Die vollständige Quelle kann weiterhin separat heruntergeladen, decodiert oder geöffnet werden.
Wie lässt sich ein Layoutversatz rund um ein zugeschnittenes Bild vermeiden?
Reservieren Sie die Zielgeometrie, bevor das Bild geladen wird. Setzen Sie sinnvolle width- und height-Attribute, wo angebracht, und definieren Sie das responsive Seitenverhältnis der Komponente in CSS.