Verwenden der CSS-Eigenschaft object-view-box
Die object-view-box Eigenschaft kann verwendet werden, um ein Viewbox innerhalb von ersetzten Elementen zu definieren, wodurch nur ein Abschnitt des ersetzten Inhalts angezeigt wird. Der angezeigte Abschnitt des Elements kann vergrößert, verkleinert oder in Originalgröße dargestellt werden, während das natürliche Seitenverhältnis des Inhalts erhalten bleibt. 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 das Verschieben über ein Element.
Natürliche Größe, extrinsische Größe und object-fit
Jedes ersetzte Element hat zwei Größen; eine extrinsische Größe und eine natürliche 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 Box-Modell und das visuelle Formatierungsmodell bestimmen die Größe der gerenderten Elemente basierend auf dem Inhalt, den HTML-Attributen, den auf die Elemente und ihre Vorfahren angewendeten CSS-Regeln und der Größe des Ansichtsfensters.
Die natürliche Größe ist die tatsächliche Größe des Inhalts selbst; die Größe, die das Element hat, wenn keine Stile angewendet werden und ohne Layoutbeschränkungen. Während die natürliche und die extrinsische Größe nicht gleich sein müssen, ist es im Allgemeinen wichtig, das natürliche Seitenverhältnis eines ersetzten Elements beizubehalten.
object-view-box versus object-fit
CSS bietet viele Größenanpassungseigenschaften. Bei der Größenanpassung ersetzter Elemente ermöglicht uns die object-fit Eigenschaft, in gewissem Maße zu steuern, wie ersetzte Elemente innerhalb eines definierten Rahmens gerendert werden. Zum Beispiel wird im folgenden Screenshot ein 1200 x 400 Bild mittels eines <img> Elements angezeigt. Das <img> Element hat die Größe 400 x 200. Der Bildinhalt wird unter Verwendung der Deklaration object-fit: none; positioniert.
Die object-view-box Eigenschaft ist flexibler als die object-fit Eigenschaft und ist in der Lage, mehr Dinge zu tun. Beispielsweise kann sie zum Zuschneiden, Zoomen und Verschieben von Bildern verwendet werden. Die Eigenschaft legt den sichtbaren Bereich (Viewbox) fest, welcher definiert, welcher Teil des Inhalts angezeigt werden soll und wie er innerhalb der extrinsischen Größe angepasst werden soll. Der Viewbox-Wert enthält ein Rechteck und seine Position relativ zur natürlichen Fläche des Inhalts, aber die physische Größe der Viewbox bleibt gleich der extrinsischen Größe. Die Viewbox markiert den Bereich im Inhalt, der angezeigt werden soll, und dann wird der Inhaltsbereich transformiert, um den extrinsischen Dimensionen des HTML-Elements zu entsprechen.
Im folgenden Bild haben wir dasselbe Leopardenbild in einem 400 x 150 Bildelement. Dieses Mal haben wir jedoch die object-view-box Eigenschaft verwendet, um den Teil des Bildes zuzuschneiden, der die Augen des Leoparden zeigt.
In diesem Fall sind, da die Abmessungen des <img> Elements und der von der object-view-box Eigenschaft definierten Viewbox gleich sind, d.h. 400 x 150 Pixel, die Seitenverhältnisse beider gleich, und das ersetzte Element wird weder skaliert noch verzerrt.
Das Beibehalten desselben Seitenverhältnisses verhindert Bildverzerrung. Mit object-view-box können wir verschiedene Bildoperationen ausführen, während unterschiedliche extrinsische und Viewbox-Größen vorhanden sind, ohne das ersetzte Element zu verzerren, wenn es vergrößert oder verkleinert wird.
Hinein- und Herauszoomen
Durch Verringern der Viewbox-Größe, d.h. des angezeigten Bereichs des ersetzten Elements, wird der Zoom-in-Effekt verstärkt, da kleinerer Inhalt gestreckt wird, um die Dimensionen des HTML-Elements auszufüllen. Eine Verringerung führt zu einem Zoom-out-Effekt.
Dieses Beispiel zeigt die Verwendung der object-view-box Eigenschaft, um einen Abschnitt eines ersetzten Elements innerhalb eines statisch dimensionierten HTML-Elements hineinzuzoomen oder herauszuzoomen. In diesem Fall dient das Auge des Leoparden, innerhalb eines sehr großen Bildes, als Fokuspunkt des Zoom-Effekts.
HTML
Wir fügen ein <img> Element und ein range <input> Element mit einem zugeordneten <label> ein. Die natürlichen Dimensionen oder die natürliche 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 benutzerdefinierte Eigenschaft --box-size, die als Höhe und Breite in der xywh() Funktion verwendet wird und eine quadratische Viewbox mit einem Seitenverhältnis von 1:1 erstellt. Der Offsetpunkt der Viewbox, der Fokuspunkt in unserem Zoom-Effekt, 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 Ereignis-Listener zum Schieberegler hinzu, der den Wert der benutzerdefinierten Eigenschaft --boxSize 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 verstärkt.
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 Dimensionen der Viewbox, während die x- und y-Werte, der Ursprungspunkt der Viewbox, konstant bleiben. Die Größe des <img> Elements bleibt ebenfalls konstant.
Verschieben eines Bildes
Wir können einen Verschiebeeffekt erzeugen, indem wir die Koordinaten des Viewbox-Fensters ändern, die x und y Komponenten der xywh() Funktion, während wir die Größe des sichtbaren Abschnitts konstant halten. Zum Beispiel können wir durch das konstante Halten der Viewbox-Dimensionen und das Ändern nur der horizontalen Position - des x Parameters - einen horizontalen Verschiebeeffekt erzeugen.
Bewegen Sie den Schieberegler. Achten Sie darauf, wie das Erhöhen und Verringern des x Wertes der xywh() Funktion einen Verschiebeeffekt erzeugt.