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 Abschnitt des Elements kann vergrößert, verkleinert oder in ursprünglicher Größe dargestellt werden, wobei das intrinsische Seitenverhältnis des Inhalts beibehalten wird. In diesem Leitfaden untersuchen wir diese Eigenschaft, vergleichen sie mit der ähnlichen object-fit-Eigenschaft und erforschen ihre Funktionalität durch Vergrößern und Verkleinern 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 den Box- und visuellen Formatierungsmodellen gerendert wird. Das Box-Modell und das visuelle Formatierungsmodell bestimmen die Größe der gerenderten Elemente basierend auf Inhalt, HTML-Attributen, CSS, das auf die Elemente und deren Vorfahren angewendet wird, und der Viewport-Größe.
Die intrinsische Größe ist die tatsächliche Größe des Inhalts selbst; die Größe, die das Element hat, wenn keine Stile angewendet werden und keine Layoutbeschränkungen bestehen. Auch wenn sich die intrinsischen und extrinsischen Größen unterscheiden können, ist es im Allgemeinen wichtig, das intrinsische Seitenverhältnis eines ersetzten Elements beizubehalten.
object-view-box versus object-fit
CSS hat viele Größeneigenschaften. Bei der Größenanpassung von ersetzten Elementen ermöglicht die object-fit-Eigenschaft uns, bis zu einem gewissen Grad zu steuern, wie ersetzte Elemente innerhalb eines definierten Rahmens gerendert werden. Beispielsweise wird im folgenden Screenshot ein 1200 x 400 Bild mit einem <img>-Element angezeigt. Das <img>-Element ist auf 400 x 200 dimensioniert. Der Bildinhalt wird mit der Deklaration object-fit: none; positioniert.
Die object-view-box-Eigenschaft ist flexibler als die object-fit-Eigenschaft und kann mehr Dinge tun. Zum Beispiel kann sie verwendet werden, um Bilder zuzuschneiden, zu zoomen und zu verschieben. Die Eigenschaft setzt den sichtbaren Bereich (Viewbox), der bestimmt, welcher Teil des Inhalts gezeigt werden soll und wie er innerhalb der extrinsischen Größe angepasst wird. Der Viewbox-Wert enthält ein Rechteck und seine Position relativ zum intrinsischen Bereich des Inhalts, aber die physische Größe des Viewboxes bleibt gleich der extrinsischen Größe. Der Viewbox markiert den anzuzeigenden Bereich im Inhalt, 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 Abschnitt des Bildes zuzuschneiden, der die Augen des Leoparden zeigt.
In diesem Fall sind die Dimensionen des <img>-Elements und des durch die object-view-box-Eigenschaft definierten Viewboxes identisch, d.h., 400 x 150 Pixel, die Seitenverhältnisse sind gleich, und das ersetzte Element wird weder skaliert noch verzerrt.
Das Beibehalten eines gleichen Seitenverhältnisses verhindert Bildverzerrungen. 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 beim Vergrößern und Verkleinern zu verzerren.
Zoomen
Das Reduzieren der Viewbox-Größe, des angezeigten Bereichs des ersetzten Elements, erhöht den Zoom-in-Effekt, da ein kleinerer Inhalt gestreckt wird, um die Dimensionen des HTML-Elements zu füllen. Eine Verkleinerung führt zu einem Zoom-out-Effekt.
Dieses Beispiel zeigt, wie die object-view-box-Eigenschaft verwendet wird, um einen Abschnitt eines ersetzten Elements innerhalb eines statisch dimensionierten HTML-Elements zu vergrößern und zu verkleinern. In diesem Fall dient das Auge des Leoparden in einem sehr großen Bild als Brennpunkt des Zoomeffekts.
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 einen quadratischen Viewbox mit einem Seitenverhältnis von 1:1 zu erstellen. Der Versatzpunkt des Viewboxes, also der Brennpunkt unseres Zoomeffekts, wird auf 500px für die x-Koordinate und 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 einen Ereignislistener zum Schieberegler hinzu, der den Wert der benutzerdefinierten --boxSize-Eigenschaft aktualisiert, wenn der Benutzer damit interagiert. Um den Zoom-in-Effekt zu verstärken, wenn der Schieberegler nach rechts bewegt wird, wird der Wert des Schiebereglers invertiert, 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 verstärken, und nach links, um ihn zu reduzieren. Der Schieberegler beeinflusst nur die Dimensionen des Viewboxes, während die x- und y-Werte, der Ursprungspunkt des Viewboxes, konstant bleiben. Die Größe des <img>-Elements bleibt ebenfalls konstant.
Schwenken eines Bildes
Wir können einen Schwenkeffekt erzeugen, indem wir die Koordinaten des Viewbox-Fensters, die x- und y-Komponenten der xywh()-Funktion, ändern und die Größe des sichtbaren Abschnitts konstant halten. Zum Beispiel können wir durch Beibehalten der Viewbox-Dimensionen und Änderung nur der horizontalen Position - des x-Parameters - einen horizontalen Schwenkeffekt erzeugen.
Bewegen Sie den Schieberegler. Beachten Sie, wie das Erhöhen und Verringern des x-Werts der xywh()-Funktion einen Schwenkeffekt erzeugt.