Steuern Sie die Bildseitenverhältnisse mit CSS3

  • Erforderliche Kenntnisse: Intermediate HTML und CSS
  • Benötigt: Texteditor, Opera 11 + / WebKit Nightly / andere unterstützende Browser
  • Projektzeit: Schneller als Sie vielleicht denken
  • Support-Datei

Dieser Artikel erschien erstmals in Ausgabe 214 des .net-Magazins.

Steuern des Seitenverhältnisses von ersetzten Elementen, wie z oder kann ein Schmerz sein. Beispielsweise möchten Sie möglicherweise, dass alle Bilder denselben Platz auf einer Seite einnehmen, aber nicht das Seitenverhältnis verzerren und verlieren, wenn jemand eine Bilddatei verwendet, die nicht die richtige Größe hat.

Das Ändern der Größe und des Buchstabierens des Bilds, um das Seitenverhältnis beizubehalten, ist eine viel elegantere Lösung als das Quetschen und Dehnen eines Bilds, um es anzupassen. Oder Sie möchten den umgekehrten Weg gehen und Elemente in Briefkästen wie HTML5 erzwingen s, um einer bestimmten Breite und Höhe zu entsprechen. Vielleicht möchten Sie, dass alle Videos ein bestimmtes Seitenverhältnis haben und eine Lösung, bei der Videos mit unterschiedlichen Seitenverhältnissen automatisch korrekt angezeigt werden?



Dieses Problem ist noch schwieriger, wenn Sie mit einem CMS arbeiten, bei dem mehrere Inhaltsautoren Videos und Bilder hochladen, insbesondere wenn sie im Gegensatz zu Mitarbeitern Endbenutzer sind. Sie möchten ein System, das Medien so verarbeitet, dass sie konsistent angezeigt werden. Diese Art von Dingen ist jedoch recht schwierig. JavaScript muss schnell auf Größen zugreifen und diese bearbeiten, viele CSS-Tricks oder viele mühsame Vorverarbeitungen mit einer serverseitigen Sprache wie PHP.

CSS3 bietet eine einfache Antwort, die derzeit in Sicht ist. Das CSS-Bildwerte und ersetzter Inhalt Der Modularbeitsentwurf definiert eine Eigenschaft namens Objektanpassung, die genau diese Art von Problemen lösen soll. Dieses Modul enthält auch eine verwandte Eigenschaft, die Objektposition, mit der Sie die horizontale und vertikale Position des Inhalts innerhalb des Elements festlegen können. Alles, was Sie brauchen, um die Beispiele hier vollständig zu lesen, ist ein unterstützender Browser wie Opera 11 oder ein nächtliches WebKit. Bevor wir uns einige Beispiele ansehen, wollen wir uns mit der grundlegenden Syntax der neuen Eigenschaften befassen.

01. Objektanpassung

Sie können sich erfolgreich bewerben Objektanpassung zu jedem ersetzten Element. (Ein ersetztes Element ist ein Element, dessen Inhalt und Erscheinungsbild durch eine externe Ressource wie ein Bild, ein Video oder eine SVG-Datei definiert wird.) Der Code lautet wie folgt:

img {
Höhe: 100px;
Breite: 100px;
Objektanpassung: enthalten;
}}

Beachten Sie, dass wir in den Codebeispielen und Beispielen für diesen Artikel die Breite und Höhe unserer ersetzten Elemente in CSS festlegen. Objektanpassung wird auch wirksam, wenn die Dimensionen mithilfe von HTML-Attributen angegeben wurden. Dies ist jedoch keine so gute Idee. In Browsern, die diese CSS-Eigenschaft nicht unterstützen, würde dies dazu führen, dass die ersetzten Elemente immer gequetscht oder gestreckt aussehen, es sei denn, Sie verfügen natürlich über eine Fallback-Lösung, z. B. die PHP-Vorverarbeitung der Mediendimensionen. Stattdessen lassen wir daher die Abmessungen weg und lassen sie von Browsern einfach anhand ihrer Eigengrößen anzeigen. Welcher Ansatz für Sie am besten geeignet ist, hängt von Ihrer spezifischen Situation ab.

Objektanpassung hat vier mögliche Werte, die wie folgt sind:

  • enthalten : Wenn Sie für ein ersetztes Element eine explizite Höhe und Breite festgelegt haben, Objektanpassung: enthalten; Dadurch wird die Größe des Inhalts (z. B. des Bilds) so geändert, dass er vollständig angezeigt wird und das intrinsische Seitenverhältnis erhalten bleibt. Er passt jedoch weiterhin in die für das Element festgelegten Abmessungen.

Objektanpassung: enthalten; Alle Bilder behalten das Seitenverhältnis bei und passen in denselben Bereich. Es ist experimentell, wird aber sicher bald zu einem Browser in Ihrer Nähe kommen

Objektanpassung: enthalten; Alle Bilder behalten das Seitenverhältnis bei und passen in denselben Bereich. Es ist experimentell, wird aber sicher bald zu einem Browser in Ihrer Nähe kommen
  • füllen : Diese Einstellung bewirkt, dass der Inhalt des Elements erweitert wird, um die dafür festgelegten Dimensionen vollständig auszufüllen, auch wenn dadurch das intrinsische Seitenverhältnis unterbrochen wird.
  • Startseite : Bei Verwendung dieser Einstellung wird das intrinsische Seitenverhältnis des Elementinhalts beibehalten, jedoch die Breite und Höhe so geändert, dass der Inhalt das Element vollständig abdeckt. Die kleinere Breite und Höhe passt genau zum Element, und die größere Abmessung läuft über das Element.
  • keiner: Wenn Sie den Wert verwenden keiner Der Inhalt ignoriert alle auf dem Element festgelegten Größen oder Gewichte vollständig und verwendet nur die Eigenabmessungen des ersetzten Elements. Obwohl der Wert keiner war in der ursprünglichen Spezifikation und wird in Opera unterstützt, wurde es dann in einer späteren Überarbeitung der Spezifikation entfernt. Es kann jedoch in einer zukünftigen Iteration zurückkehren. HINWEIS: Weitere Informationen dazu, wie sich diese Werte auf das Seitenverhältnis eines Bildes auswirken, finden Sie unter object-fit-chart.png in den Tutorial-Dateien

Bilder mit verschobenem Seitenverhältnis sehen schrecklich aus. Die Frau wurde zusammengedrückt, so dass sie wie eine Strichmännchen aussah, während der Junge gestreckt wurde, wodurch er fett aussah

Bilder mit verschobenem Seitenverhältnis sehen schrecklich aus. Die Frau wurde zusammengedrückt, so dass sie wie eine Strichmännchen aussah, während der Junge gestreckt wurde, wodurch er fett aussah

02. Objektposition

Objektposition funktioniert genauso wie Hintergrundposition Dies gilt für Hintergrundbilder und kann dieselben Werte annehmen (Pixel, Ems, Prozentsätze, Schlüsselwörter usw.). Es gibt die Position des Inhalts eines ersetzten Elements innerhalb des Bereichs dieses Elements an. Zum Beispiel:

img {
Höhe: 100px;
Breite: 100px;
Objektanpassung: enthalten;
Objektposition: Top 75%;
}}

In der Oper Objektanpassung kann auch einen Wert von annehmen Auto Dies ist die Standardeinstellung, wenn die Eigenschaft nicht angegeben ist. Es ist nur wirklich vorhanden, um die Abwärtskompatibilität beizubehalten und frühere Einstellungen überschreiben zu können.

03. Verhältnis beibehalten

Manchmal als Letterboxing bezeichnet, möchten Sie manchmal das Seitenverhältnis der Bilder auf einer Seite beibehalten und sie so einstellen, dass sie in denselben Bereich passen. Beispielsweise verfügen Sie möglicherweise über ein Content-Management-System, mit dem Sie Produkte auf eine E-Commerce-Website oder Bilder für eine Bildergalerie mit vielen verschiedenen Inhaltsautoren hochladen können.

Durch das Letterboxing der Bilder werden sie mit dem ursprünglichen Seitenverhältnis reproduziert, sodass die Motive wieder wie sie selbst aussehen

Durch das Letterboxing der Bilder werden sie mit dem ursprünglichen Seitenverhältnis reproduziert, sodass die Motive wieder wie sie selbst aussehen

Sie können Bilder in ungefähr der richtigen Größe hochladen, aber die Abmessungen sind nicht immer genau, unabhängig von den Richtlinien, die Sie möglicherweise veröffentlichen! In diesem Fall können Sie das Seitenverhältnis ändern, damit alle Bilder genau in den gleichen Bereich passen, aber das wird wahrscheinlich schrecklich aussehen.

Die andere Möglichkeit besteht darin, die Bilder mit einem Briefkasten zu versehen. Das sieht viel besser aus, ist aber auf der Clientseite mit der aktuellen Browserunterstützung ziemlich kompliziert zu erreichen. Sie können natürlich eine serverseitige Lösung verwenden, um die Bilder vorzuverarbeiten, aber dies ist wiederum komplex und erhöht den Overhead.

Mit diesem Problem können Sie ganz einfach umgehen Objektanpassung ::

img {
Breite: 150px;
Höhe: 150px;
...
Objektanpassung: enthalten;
}}

Im mein Beispiel sind die Thumbnails alle auf die gleiche Breite und Höhe eingestellt, aber Objektanpassung: enthalten; Erzwingt, dass alle Bilder in denselben Bereich passen und das Seitenverhältnis beibehalten. Eine noch bessere Lösung, abhängig von Ihrer Anwendung, könnte darin bestehen, das Seitenverhältnis beizubehalten, aber die Größe und den Zuschnitt des Bildes so zu ändern, dass es das Bild vollständig umhüllt Element.

Dies kann leicht durch Ersetzen erfolgen Objektanpassung: enthalten; mit Objektanpassung: Abdeckung; und hinzufügen Überlauf versteckt; zum Mix:

img {
...
Objektanpassung: Abdeckung;
Überlauf versteckt;
}}

In diesem Fall, Objektanpassung: Abdeckung; Vergrößert die Bilder, um sie vollständig zu umhüllen Elemente und Überlauf versteckt; schneidet dann den Bildbereich ab, der außerhalb dieser Elemente verschüttet wird (auschecken) object-fit-cover-images.html in den Beispieldateien).

Hier werden die Bilder so erstellt, dass sie das Element mit Objektanpassung abdecken: Abdeckung; und durch Überlauf auf die richtige Größe zugeschnitten: versteckt;

04. Überschreiben des Seitenverhältnisses eines Videos

In unserem nächsten Beispiel nehmen wir ein Video mit einem fehlerhaften Seitenverhältnis auf und zwingen es, das Seitenverhältnis zu ändern und genau in das Bild zu passen Elementgröße, die wir angegeben haben. Warum willst du das tun? Möglicherweise haben einige der Videos, die Ihre Inhaltseditoren auf Ihr CMS hochladen, ein fehlerhaftes Seitenverhältnis, und Sie möchten sie beispielsweise alle im laufenden Betrieb beheben.

Objektanpassung: füllen; ermöglicht es uns, dies auf einen Schlag zu tun. Um den Punkt zu veranschaulichen, unsere Objektanpassung: füllen; Videobeispiel (siehe object-fit-fill-video.html in den Codebeispielen) verwendet ein paar Elemente wie folgt:

Obwohl die Elemente haben im Markup angegebene Attribute für Breite und Höhe. Standardmäßig werden sie im Letterbox-Format angezeigt, da sie ein anderes Seitenverhältnis haben.

Standardmäßig behält ein in eine Seite eingebettetes Video immer das intrinsische Seitenverhältnis bei und wird bei Bedarf mit einem Briefkasten versehen

Standardmäßig behält ein in eine Seite eingebettetes Video immer das intrinsische Seitenverhältnis bei und wird bei Bedarf mit einem Briefkasten versehen

Das element versucht immer, das intrinsische Seitenverhältnis der Quelldatei beizubehalten.

Um dies zu beheben, haben wir alle Videos gezwungen, sich an die Breite und Höhe des Videos anzupassen Elemente durch Anwenden Objektanpassung: füllen; ::

.object-fit {
...
Objektanpassung: füllen;
}}

Dadurch werden alle Videos im gleichen Seitenverhältnis angezeigt.

Objektanpassung: füllen; Überschreibt das Standardverhalten, sodass Videos die festgelegte Breite und Höhe ihrer Elemente annehmen

Objektanpassung: füllen; Überschreibt das Standardverhalten, sodass Videos die festgelegte Breite und Höhe ihrer Elemente annehmen

05. Übergangseffekte

Kombinieren Objektanpassung und Objektposition Mit CSS-Übergängen können einige interessante Effekte für Bild- oder Videogalerien erzielt werden:

ich

Ich habe die Bildergalerie mit ein wenig Trick in eine raffinierte Oberfläche mit Registerkarten verwandelt

ich

Ich habe auch eine Kombination von Übergängen verwendet, Objektanpassung: keine; und Überlauf: versteckt; für einen coolen expandierenden Effekt

In diesem Beispiel (siehe object-fit-none-transitions.html In den Tutorials-Dateien habe ich die Bildergalerie genommen, die wir im ersten Beispiel gesehen haben, und:

  • Die zentrierte Position des Beispiels wurde entfernt und die Position der Bilder und Beschriftungen vertauscht, um dem Bild mehr Platz zum Erweitern zu geben.
  • Absolut anders positioniert Sie enthalten Bilder und ihre Beschriftungen, sodass sie alle an derselben Stelle angezeigt und standardmäßig mit ausgeblendet werden Deckkraft: 0; .
  • Oben im Beispiel wurde eine Reihe von Navigationslinks hinzugefügt, um zwischen den verschiedenen Bild- / Beschriftungssätzen zu wechseln, und die verwendet :Ziel Pseudo-Klasse plus Übergänge, damit sie beim Durchlaufen der Links reibungslos angezeigt und ausgeblendet werden (ja, es ist eine Möglichkeit, einen Index mit Registerkarten ohne Verwendung von JavaScript zu erstellen).
  • Hinzugefügt Tabindex und accesskeys um die Links und Bilder nur über die Tastatur zugänglich zu machen.
  • Am wichtigsten für die Zwecke dieses Artikels, ausgetauscht die Objektanpassung: enthalten; CSS für Folgendes:

img {
Breite: 150px;
Höhe: 150px;
...
Objektanpassung: keine;
Überlauf versteckt;
Objektposition: 25% 50%;
Übergang: 1s alle;
...
}}
img: hover, img: focus {
...
Höhe: 400px;
Breite: 400px;
}}

Wenn Sie sich über die verschiedenen Miniaturansichten bewegen, werden Sie feststellen, dass die Bilder nicht auf das Element verkleinert werden.

Stattdessen wird nur ein kleiner Teil des Bildes angezeigt, und das Element wächst, um mehr vom Bild freizulegen. Was gibt?

Indem man es einstellt Objektanpassung: keine; auf der Ich fordere ihren Inhalt auf, die zuvor festgelegte Breite und Höhe vollständig zu ignorieren und aus den Seiten der Elemente herauszulaufen.

Da die intrinsische Größe der Bilddateien viel größer ist als die für die angegebenen Abmessungen Elemente, die ich verwendet habe Überlauf versteckt; alles zu beschneiden, was herausläuft.

Ein Übergang wird dann verwendet, um die Größe des gleichmäßig zu erhöhen Element, wenn es schwebt / fokussiert ist, wodurch mehr vom Bild sichtbar wird.

Und das ist nicht alles. Ich habe auch das verwendet Objektposition: 25% 50%; Eigenschaft, um die Position des Bildes auf dem zu verschieben Element ein wenig nach rechts, was einen schönen inhaltlichen Effekt erzeugt.

06. Zusammenfassung

In diesem Tutorial wurden einige Ideen für die Verwendung vorgestellt Objektanpassung und Objektposition . Weitere Beispiele finden Sie auf Opera Objektanpassung Testsuiten Seite . Wir freuen uns darauf zu sehen, welche Beispiele Sie erstellen, und teilen uns wie immer Ihre Meinung mit
unsere Umsetzung.

Ein Entwickler-Relationship-Manager für Opera, Chris spielt auch mit Heavy Metal Rock Göttern Eroberung von Stahl .

Mochte dies? Lese das!