object-view-box

Probieren Sie es aus

object-view-box: inset(0 0);

object-view-box: inset(20%);

object-view-box: xywh(95px 20px 60px 60px);

object-view-box: rect(110px 120px 200px 45px);

object-view-box: none;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/plumeria-146x200.jpg"
    alt="A close-up of red flowers and buds on a branch." />
</section>

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

@supports not (object-view-box: none) {
  body::before {
    content: "Your browser does not support the 'object-view-box' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

Syntax

/* keywords */
object-view-box: none;

/* <basic-shape-rect> functions */
object-view-box: inset(20%);
object-view-box: inset(20% 30%);
object-view-box: inset(10px 0 25px 33px);
object-view-box: xywh(95px 20px 60px 60px);
object-view-box: rect(10px 30px 30px 10px);

/* Global values */
object-view-box: inherit;
object-view-box: initial;
object-view-box: revert;
object-view-box: revert-layer;
object-view-box: unset;

Werte

none

Das Element hat keine Viewbox. Dies ist der Standardwert.

<basic-shape-rect>

Eine inset(), xywh() oder rect() Funktion, die eine Viewbox für ein Element mit natürlichen Dimensionen (ersetzte Elemente) angibt. Andernfalls wird zu none aufgelöst.

Beschreibung

Die object-view-box Eigenschaft kann verwendet werden, um ersetzte Elemente wie Bilder und Videos zu beschneiden oder zu skalieren. Sie zeigt einen Abschnitt des Inhalts des ersetzten Elements im reservierten Platz für dieses Element an. Der anzuzeigende Abschnitt des ersetzten Elements wird durch den Wert der Eigenschaft definiert. Der verfügbare reservierte Platz wird durch die Standard-extrinsische Größe des Elements bestimmt. Der angezeigte Inhaltsabschnitt kann herangezoomt, herausgezoomt oder in seiner Originalgröße präsentiert werden, wobei das intrinsische Seitenverhältnis des Inhalts erhalten bleibt.

Der Eigenschaftswert ist ein <basic-shape-rect>, eine der <basic-shape> Funktionen, die auf die Definition einer rechteckigen Form beschränkt ist. Zum Beispiel kann der Wert eine xywh() Funktion sein:

img {
  object-view-box: xywh(410px 0 400px 150px);
}

In diesem Fall befindet sich die obere linke Ecke des Abschnitts des Bildes, der angezeigt wird, 410px von der linken Kante und 0 vom oberen Rand entfernt, wie es durch die x- und y-Koordinatenparameter definiert ist. Die Größe des Abschnitts des Originalbilds, der angezeigt wird, ist 400px breit und 150px hoch; die w- und h-Komponenten der Funktion. Dieser 400x150 Abschnitt des Bildes wird in dem Platz angezeigt, der ursprünglich für das Bild reserviert wurde, als die Seite layoutiert wurde. Ob der angezeigte Inhaltsabschnitt in seiner ursprünglichen intrinsischen Größe, herangezoomt oder herausgezoomt ist, hängt davon ab, ob die Viewbox 400px x 150px, kleiner oder größer als die Größe des Bildelements ist.

In diesem Fall, da die durch die object-view-box Eigenschaft definierte rechteckige Viewbox und der rechteckige Bereich des <img> Elements die gleiche Größe haben, also 400 x 150 Pixel, wird das ersetzte Element nicht skaliert.

Reduzieren Sie die w- und h-Werte, um einen Heranzoomeffekt zu erzeugen; da der kleinere Bildabschnitt gestreckt wird, bekommt er einen Heranzeomeffekt.

Erhöhen Sie die w- und h-Werte, um einen Herauszoomeffekt zu erzeugen; da der größere Bildabschnitt verkleinert wird, bekommt er einen Herauszoomeffekt.

Das Animieren der x- und y-Koordinaten erzeugt einen Verschiebeeffekt, indem die Viewbox des Elements bewegt wird, während das Element selbst an seinem ursprünglichen Ort bleibt.

Formale Definition

Formale Syntax

object-view-box = 
  none                |
  <basic-shape-rect>  

<basic-shape-rect> = 
  <inset()>  |
  <rect()>   |
  <xywh()>   

<inset()> = 
  inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )  

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )  

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )  

<length-percentage> = 
  <length>      |
  <percentage>  

<border-radius> = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

Beispiele

Grundlegende Nutzung

Dieses Beispiel demonstriert die grundlegende Nutzung und die Effekte der object-view-box Eigenschaft, mit Beispielen, die die drei verschiedenen <basic-shape-rect> Funktionen verwenden.

HTML

Wir haben drei fast identische <img> Elemente, die in <figure> Elemente eingebettet sind; der einzige Unterschied sind ihre Klassennamen.

<figure>
  <img
    class="intrinsic"
    src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg"
    alt="Original scale section of a painted hand" />
  <figcaption>intrinsic</figcaption>
</figure>
<figure>
  <img
    class="zoom-in"
    src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg"
    alt="Zoomed in section of a painted hand" />
  <figcaption>zoomed in</figcaption>
</figure>
<figure>
  <img
    class="zoom-out"
    src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg"
    alt="Zoomed out section of a painted hand" />
  <figcaption>zoomed out</figcaption>
</figure>

CSS

Wir gestalten alle Bilder, um die gleiche Breite und Höhe zu haben, und setzen dann jede Klasse, und daher jedes Bild, so, dass es einen anderen object-view-box Wert hat. Die intrinsische Größe des bemalten Handbilds ist 298px mal 332px. Wir setzen die height und width, um die extrinsische Größe auf 200px mal 200px zu setzen.

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Wir setzen drei verschiedene object-view-box Eigenschaftswerte unter Verwendung von drei verschiedenen Formfunktionen. Der Wert der xywh() Funktion des intrinsic Elements zeigt einen 200px quadratischen Abschnitt des Bildinhalts, beginnend 70px von links und 90px von oben. Die rect() Funktion des zoom-in Elements zeigt einen 160px quadratischen Abschnitt des ursprünglichen Elements an, von 110px bis 270px von der oberen Kante und 90px bis 250px von der linken Kante. Die inset() Funktion des zoom-out ersetzten Elements zeigt einen 298px quadratischen Abschnitt des ursprünglichen Elements an; zeigt die gesamte Breite des Bildes an, während 17px von oben und unten abgeschnitten sind.

.intrinsic {
  object-view-box: xywh(70px 90px 200px 200px);
}

.zoom-in {
  object-view-box: rect(110px 250px 270px 90px);
}

.zoom-out {
  object-view-box: inset(17px 0 17px 0);
}

@supports not (object-view-box: none) {
  body::before {
    content: "Your browser does not support the 'object-view-box' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

figure {
  display: inline-block;
  margin: 0;
}

figcaption {
  text-align: center;
}

Ergebnisse

Die intrinsic Version zeigt einen unskalierten Abschnitt des Bildes. Die zoom-in Version zeigt einen kleineren Abschnitt (160px Quadrat) des Bildes, hochskaliert, um in die 200px quadratische Viewbox zu passen. Da der Abschnitt gestreckt wird, sieht er herangezoomt aus. Die zoom-out Version zeigt einen größeren (298px Quadrat) Abschnitt des Bildes, herunterskaliert, um in die 200px quadratische Viewbox zu passen. Da der Abschnitt verkleinert wird, sieht er herausgezoomt aus.

Live-Heranzoomen mit der object-view-box-Eigenschaft

Dieses Beispiel demonstriert die Verwendung der object-view-box Eigenschaft, um einen Abschnitt eines ersetzten Elements innerhalb eines statisch dimensionierten HTML-Elements herein- und herauszuzoomen. In diesem Fall dient das Auge des Leoparden in einem sehr großen Bild als Brennpunkt des Heranzoomeffekts.

HTML

Wir fügen ein <img> Element und ein range <input> Element mit einem zugehörigen <label> hinzu. Die natürlichen Dimensionen oder die intrinsic 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 Brennpunkt in unserem Zoomeffekt, ist 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.

input {
  width: 350px;
}

output {
  text-align: center;
  background-color: #dedede;
  font-family: monospace;
  padding: 5px;
  display: block;
}

@supports not (object-view-box: none) {
  body::before {
    content: "Your browser does not support the 'object-view-box' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

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 Event Listener zum Schieberegler hinzu, der den Wert der benutzerdefinierten Eigenschaft --boxSize aktualisiert, wenn der Benutzer mit diesem interagiert. Um den Heranzoomeffekt zu verstärken, wenn der Schieberegler nach rechts bewegt wird, wird der Wert des Schiebereglers invertiert, indem er von 500px abgezogen wird, da das Reduzieren der Viewbox-Größe den Heranzoomeffekt 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 Heranzoomeffekt zu verstärken, und nach links, um ihn zu reduzieren. Der Schieberegler beeinflusst nur die Dimensionen der Viewbox, während die x- und y-Werte, der Ursprungsort der Viewbox, konstant bleiben. Die Größe des <img> Elements ändert sich ebenfalls nicht.

Verschieben mit der object-view-box-Eigenschaft

Dieses Beispiel demonstriert das Verschieben eines Bildes durch Animieren des Werts der object-view-box Eigenschaft.

HTML

Das HTML umfasst ein einziges Bild.

<img
  src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"
  alt="leopard" />

CSS

Wir definieren eine Bildgröße und behalten die Dimensionen der Viewbox, die w und h Komponenten der xywh() Funktion, konstant, während wir die oberen und linken Positionen animieren und die Position der x und y Parameter über fünf Sekunden ändern.

img {
  width: 350px;
  height: 350px;

  object-view-box: xywh(0 30px 400px 400px);

  animation: panning 5s linear infinite alternate;
}

@keyframes panning {
  from {
    object-view-box: xywh(0 -50px 400px 400px);
  }
  to {
    object-view-box: xywh(800px 68px 400px 400px);
  }
}

@supports not (object-view-box: none) {
  body::before {
    content: "Your browser does not support the 'object-view-box' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung der CSS object-view-box Eigenschaft
• object-fit
• object-position
• background-size
• Verstehen des Seitenverhältnisses
• CSS Bilder Modul