Verwendung der CSS-Eigenschaft object-view-box
Die object-view-box-Eigenschaft kann verwendet werden, um einen Viewbox innerhalb von ersetzten Elementen zu definieren, sodass nur ein Abschnitt des ersetzten Inhalts angezeigt wird. Der angezeigte Unterabschnitt des Elements kann als vergrößert, verkleinert oder in Originalgröße dargestellt werden, während das intrinsische Seitenverhältnis des Inhalts beibehalten wird. In diesem Leitfaden untersuchen wir diese Eigenschaft, vergleichen sie mit der ähnlichen object-fit-Eigenschaft und erkunden ihre Funktionalität durch Ein- und Auszoomen sowie Schwenken über ein Element.
Intrinsische Größe, extrinsische Größe und object-fit
Jedes ersetzte Element hat zwei Größen; eine extrinsische Größe und eine intrinsische Größe.
Die extrinsische Größe ist die Dimension des HTML-Elements, in dem der Inhalt basierend auf dem Box- und dem visuellen Formatierungsmodell gerendert wird. Das Boxmodell und das visuelle Formatierungsmodell bestimmen die Größe der gerenderten Elemente basierend auf Inhalt, HTML-Attributen, auf die Elemente angewandtem CSS und deren Vorfahren sowie der Größe des Ansichtsfensters.
Die intrinsische Größe ist die tatsächliche Größe des Inhalts selbst; die Größe, die das Element hat, wenn keine Stile angewandt sind und ohne jegliche Layoutbeschränkungen. Während die intrinsische und extrinsische Größe nicht gleich sein müssen, ist es im Allgemeinen wichtig, das intrinsische Seitenverhältnis eines ersetzten Elements beizubehalten.
object-view-box versus object-fit
CSS hat viele Größenangaben. Wenn es darum geht, ersetzte Elemente zu dimensionieren, ermöglicht uns die object-fit-Eigenschaft, bis zu einem gewissen Grad zu steuern, wie ersetzte Elemente innerhalb eines definierten Box gerendert werden. Beispielsweise wird auf dem folgenden Screenshot ein 1200 x 400 Bild mithilfe eines <img>-Elements angezeigt. Das <img>-Element ist auf 400 x 200 dimensioniert. Der Bildinhalt wird mit der object-fit: none;-Deklaration positioniert.
Die object-view-box-Eigenschaft ist flexibler als die object-fit-Eigenschaft und ist in der Lage, mehr Dinge zu tun. Zum Beispiel kann sie verwendet werden, um Bilder zuzuschneiden, zu zoomen und zu schwenken. Die Eigenschaft legt den sichtbaren Bereich (Viewbox) fest, der definiert, welcher Teil des Inhalts angezeigt werden soll und wie er in die extrinsische Größe passt. Der Viewbox-Wert enthält ein Rechteck und seine Position relativ zum intrinsischen Bereich des Inhalts, aber die physikalische Größe des Viewbox bleibt gleich der extrinsischen Größe. Der Viewbox markiert den Bereich im Inhalt, der angezeigt werden soll, und dann wird der Inhaltsbereich so transformiert, dass er den extrinsischen Abmessungen entspricht, die in das HTML-Element passen.
Im folgenden Bild haben wir dasselbe Leopardenbild in einem 400 x 150 Bild-Element. Diesmal haben wir jedoch die object-view-box-Eigenschaft verwendet, um den Teil des Bildes freizustellen, der die Augen des Leoparden zeigt.
In diesem Fall sind die Abmessungen des <img>-Elements und des durch die object-view-box-Eigenschaft definierten Viewbox gleich, d.h. 400 x 150 Pixel, die Seitenverhältnisse beider sind gleich, und das ersetzte Element wird weder skaliert noch verzerrt.
Das Beibehalten des gleichen Seitenverhältnisses verhindert die Verzerrung von Bildern. Mit object-view-box können wir verschiedene Bildoperationen durchführen, während wir unterschiedliche extrinsische und Viewbox-Größen haben, ohne das ersetzte Element zu verzerren, wenn es vergrößert oder verkleinert wird.
Ein- und Auszoomen
Das Reduzieren der Viewbox-Größe, des Bereichs des ersetzten Elements, das angezeigt wird, erhöht den Zoom-in-Effekt, da kleinerer Inhalt gedehnt wird, um in die Abmessungen des HTML-Elements zu passen. Das Verringern führt zu einem Zoom-out-Effekt.
Dieses Beispiel demonstriert die Verwendung der object-view-box-Eigenschaft, um einen Abschnitt eines ersetzten Elements in einem statisch dimensionierten HTML-Element ein- und auszuzoomen. In diesem Fall dient das Auge des Leoparden innerhalb eines sehr großen Bildes als Schwerpunkt des Zoom-Effekts.
HTML
Wir fügen ein <img>-Element und ein range <input>-Element mit einem zugehörigen <label> hinzu. Die natürlichen Abmessungen oder die intrinsische Größe des ursprünglichen Leopardenbildes sind 1244px breit und 416px hoch, mit einem Seitenverhältnis von 3:1.
<img
src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"
alt="leopard" />
<p>
<label for="box-size">Zoom-in: </label>
<input type="range" id="box-size" min="115" max="380" value="150" />
</p>
<output></output>
CSS
Wir definieren eine --box-size benutzerdefinierte Eigenschaft, die als Höhe und Breite in der xywh()-Funktion verwendet wird, um eine quadratische Viewbox mit einem Seitenverhältnis von 1:1 zu erstellen. Der Offset-Punkt der Viewbox, der Brennpunkt in unserem Zoom-Effekt, ist auf 500px für die x-Koordinate und auf 30px für die y-Koordinate gesetzt, was der oberen linken Ecke des rechten Auges des Leoparden entspricht.
img {
width: 350px;
height: 350px;
border: 2px solid red;
--box-size: 150px;
object-view-box: xywh(500px 30px var(--box-size) var(--box-size));
}
JavaScript
Wir fügen dem Schieberegler einen Ereignis-Listener hinzu, der den Wert der benutzerdefinierten Eigenschaft --box-size aktualisiert, wenn der Benutzer damit interagiert. Um den Zoom-in-Effekt zu erhöhen, wenn der Schieberegler nach rechts bewegt wird, wird der Wert des Schiebereglers umgekehrt, indem er von 500px subtrahiert wird, da das Reduzieren der Viewbox-Größe den Zoom-in-Effekt erhöht.
const img = document.querySelector("img");
const zoom = document.getElementById("box-size");
const output = document.querySelector("output");
function update() {
const size = 500 - zoom.value;
img.style.setProperty("--box-size", `${size}px`);
output.innerText = `object-view-box: xywh(500px 30px ${size}px ${size}px);`;
}
zoom.addEventListener("input", update);
update();
Ergebnis
Bewegen Sie den Schieberegler nach rechts, um den Zoom-in-Effekt zu erhöhen, und nach links, um ihn zu verringern. Der Schieberegler beeinflusst nur die Abmessungen der Viewbox, während die x- und y-Werte, der Ursprungspunkt des Viewbox, konstant bleiben. Die Größe des <img>-Elements bleibt ebenfalls konstant.
Panoramabewegung eines Bildes
Wir können einen Panoramabewegungs-Effekt erzeugen, indem wir die Koordinaten des Viewbox-Fensters, die x- und y-Komponenten der xywh()-Funktion, ändern, während die Größe des sichtbaren Abschnitts konstant bleibt. Zum Beispiel, indem wir die Viewbox-Abmessungen konstant halten und nur die horizontale Position ändern - den x-Parameter - können wir einen horizontalen Panoramabewegungs-Effekt erzeugen.
Bewegen Sie den Schieberegler. Beachten Sie, wie das Erhöhen und Verringern des x-Wertes der xywh()-Funktion einen Panoramabewegungs-Effekt erzeugt.