Articles
Einführung in CSS
`object-fit`- und `object-position`-Eigenschaften

`object-fit`- und `object-position`-Eigenschaften

Dieser Artikel erklärt die object-fit- und object-position-Eigenschaften.

Sie lernen, wie Sie Objekte wie Bilder und Videos anordnen und in CSS schreiben können.

YouTube Video

HTML zur Vorschau

css-object-fit-position.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Objektanpassung bezogen

object-fit-Eigenschaft

Die CSS-object-fit-Eigenschaft wird hauptsächlich verwendet, um zu steuern, wie Bilder, Videos und andere Inhalte in ihre Containerelemente passen. Durch die Verwendung dieser Eigenschaft können Sie flexibel festlegen, wie die angegebenen Elemente skaliert und ästhetisch positioniert werden. Es ist sehr nützlich, die Anzeige von Bildern oder Videos durch Zuschneiden oder Skalieren anzupassen, wenn diese nicht in das übergeordnete Element passen.

object-fit-Werte

fill (Standardwert) 
1img {
2  object-fit: fill;
3}

fill ist der Standardwert, bei dem Bilder oder Videos gezwungen werden, sich zu strecken, um vollständig zur Breite und Höhe des übergeordneten Elements zu passen. In diesem Fall wird das ursprüngliche Seitenverhältnis ignoriert, was zu einer Verzerrung des Bildes führen kann.

  • Es passt vollständig zur Größe des übergeordneten Elements.
  • Da das Seitenverhältnis ignoriert wird, können Bilder oder Videos vertikal oder horizontal gestreckt werden.
contain 
1img {
2  object-fit: contain;
3}

contain skaliert Inhalte so, dass sie vollständig in das übergeordnete Element passen und das Seitenverhältnis beibehalten wird. Es überschreitet nicht die Größe des übergeordneten Elements, und es kann Paddings auf der vertikalen oder horizontalen Seite geben.

  • Der gesamte Inhalt wird angezeigt.
  • Um das ursprüngliche Seitenverhältnis zu bewahren, können Paddings (Letterbox- oder Pillarbox-Effekt) auftreten.
cover 
1img {
2  object-fit: cover;
3}

cover skaliert den Inhalt so, dass er das übergeordnete Element vollständig abdeckt, während das Seitenverhältnis beibehalten wird. Einige Inhalte können zugeschnitten werden, um in das übergeordnete Element zu passen, aber das gesamte Element füllt den Container, sodass keine Lücken entstehen.

  • Der Inhalt deckt das übergeordnete Element vollständig ab.
  • Es kann zugeschnitten werden, wobei das ursprüngliche Seitenverhältnis erhalten bleibt.
  • Wird häufig für Hintergrundbilder oder Hero-Section-Bilder verwendet.
none 
1img {
2  object-fit: none;
3}

none zeigt Bilder oder Videos in ihrer ursprünglichen Größe und Seitenverhältnis an. Es passt sich nicht an die Größe des Elternelements an und der Inhalt läuft bei Bedarf über.

  • Die ursprüngliche Größe des Inhalts bleibt erhalten.
  • Es wird keine Größenänderung vorgenommen, um den Inhalt in das Elternelement einzupassen.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down ist ein Wert, der das Verhalten von none und contain kombiniert. Wenn der Inhalt in das Elternelement passt, verhält es sich wie none. Ist der Inhalt jedoch zu groß, wird das Verhalten von contain angewendet und der Inhalt wird verkleinert, um zu passen.

  • Der Inhalt wird verkleinert, wenn er größer als das Elternelement ist.
  • Es wird in seiner ursprünglichen Größe angezeigt, wenn es kleiner ist.

Beispielhafte Verwendung

Hintergrundbilder an das Elternelement anpassen

Zum Beispiel wird häufig cover verwendet, um ein Bild über den gesamten Bildschirm zu verteilen und dabei ein responsives Design zu berücksichtigen. Der folgende Code ist ein Beispiel dafür, wie ein Bild eng in das Elternelement eingepasst wird, auch wenn es dabei zugeschnitten wird.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

In diesem Fall deckt das Bild das Elternelement vollständig ab und sorgt für ein schönes Layout auf jeder Bildschirmgröße. Wenn das Seitenverhältnis abweicht, sind möglicherweise einige Teile des Bildes nicht sichtbar, aber es wird eine zum Design passende Darstellung erreicht.

Bilder mit beibehaltetem Seitenverhältnis anzeigen

Wenn Sie als Nächstes das gesamte Bild in das Elternelement einpassen möchten, während das Seitenverhältnis beibehalten wird, ist contain geeignet.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

In diesem Beispiel wird das Bild verkleinert, um in den Container zu passen, was zu etwas Abstand führt. Das ursprüngliche Bild wird jedoch unverzerrt angezeigt.

Häufige Fehler

Ein häufiger Fehler bei der Verwendung von object-fit ist, die Größe des Elternelements nicht festzulegen. object-fit ist eine Eigenschaft, um Inhalte an das Elternelement anzupassen. Wenn die Größe des Elternelements nicht festgelegt ist, kann der erwartete Effekt nicht erzielt werden. Stellen Sie sicher, dass das Elternelement width oder height korrekt eingestellt hat.

Im folgenden Code ist beispielsweise die Höhe des Elternelements nicht angegeben, sodass object-fit nicht wie vorgesehen funktioniert.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

In diesem Fall müssen Sie die Höhe des Elternelements angeben oder das gesamte Layout mithilfe von Flexbox oder Grid-Layout anpassen.

Situationen, in denen object-fit verwendet werden sollte

object-fit ist wichtig, insbesondere in responsiven Designs und Websites, die auf verschiedene Bildschirmgrößen ausgelegt sind. Zum Beispiel ist es in den folgenden Fällen nützlich:.

  • Wenn Sie Bilder oder Videos anpassen möchten, damit sie auf verschiedenen Geräten korrekt angezeigt werden.
  • Wenn Sie Hintergrundbilder oder Ähnliches im Vollbildmodus anzeigen möchten, während ein Zuschneiden möglich ist.
  • Wenn Sie ein Bild in ein übergeordnetes Element einfügen möchten, während das Seitenverhältnis beibehalten wird.
  • Wenn Sie Bildgrößen einheitlich anzeigen möchten, beispielsweise in Galerien.

Die Verwendung von object-fit in diesen Situationen kann die Designkonsistenz wahren und die Benutzererfahrung verbessern.

Zusammenfassung

object-fit ist eine leistungsstarke CSS-Eigenschaft, mit der Sie flexibel steuern können, wie Bilder und Videos relativ zu ihren übergeordneten Elementen auf einer Webseite angezeigt werden. Durch die Verwendung verschiedener Werte wie fill, contain, cover, none und scale-down können Sie unterschiedliche Designanforderungen erfüllen. Wenn Sie verstehen, wie Sie es richtig verwenden und angemessen anwenden, können Sie visuell ansprechende Layouts erstellen.

Meistern Sie die Verwendung von object-fit, um responsive und ästhetisch ansprechende Designs zu erstellen.

object-position-Eigenschaft

Die CSS-Eigenschaft object-position wird verwendet, um die Position von Inhalten wie Bildern und Videos innerhalb eines Elements zu steuern. Mit object-position können Sie Inhalte an bestimmten Punkten positionieren und visuelle Effekte erzielen, die zum Layout passen.

Übersicht über object-position

object-position wird hauptsächlich auf Medienelemente wie <img>- und <video>-Tags angewendet. Diese Eigenschaft steuert, wo Medien innerhalb ihres Containers angezeigt werden. object-fit wird oft in Kombination mit object-position verwendet, wobei object-fit festlegt, wie ein Bild oder Video in die Rahmengröße passt, und object-position die Anzeigeposition des Inhalts anpasst.

1img {
2    object-fit: cover;
3    object-position: center;
4}
  • In diesem Beispiel wird das Bild skaliert, um in den Container zu passen (object-fit: cover), und so positioniert, dass sein Zentrum angezeigt wird (object-position: center).

So legen Sie Werte fest

object-position wird mit zwei Werten wie folgt angegeben:.

  • Horizontale Position (X-Achse)
  • Vertikale Position (Y-Achse)
Format der Wertangabe

In object-position können Sie Werte im folgenden Format angeben:.

  • Schlüsselwörter: top, right, bottom, left, center
  • Prozentsatz: 0% bis 100%
  • Längeneinheiten: px, em, rem, usw.

Zum Beispiel können Sie es so verwenden.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Kombination von Schlüsselwörtern und Prozentsätzen

Es ist auch möglich, Schlüsselwörter und Prozentsätze zu mischen.

1img {
2    object-position: right 50%;
3}
  • In diesem Beispiel wird das Bild am rechten Rand platziert und vertikal bei 50% zentriert. Diese Kombination ist sehr nützlich, wenn eine flexible Positionierung erforderlich ist.

Kombination mit object-fit

object-position wird oft zusammen mit object-fit verwendet. object-fit bestimmt, wie ein Bild oder Video relativ zu seinem Rahmen skaliert wird. Zum Beispiel wird bei Verwendung von object-fit: cover das Bild an den Rahmen angepasst und entsprechend der angegebenen object-position ausgerichtet.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}
  • In diesem Beispiel breitet sich das Bild über den gesamten Container aus und zeigt den unteren rechten Teil des Inhalts.
Beispiele kombiniert mit object-fit-Werten
  • fill: Das Bild kann verzerrt sein, passt aber in den gesamten Container.
  • contain: Das gesamte Bild wird angezeigt, wobei das Seitenverhältnis beibehalten wird.
  • cover: Das Bild wird zugeschnitten, um in den Container zu passen, wobei das Seitenverhältnis beibehalten wird.
  • none: Das Bild wird in seiner Originalgröße angezeigt.
1img {
2    object-fit: contain;
3    object-position: top;
4}

In dieser Einstellung wird das Bild oben im Container platziert, und das gesamte Bild wird angezeigt.

Erweiterte Nutzung

object-position kann in verschiedenen Szenarien angewendet werden, nicht nur für einfache Positionsanpassungen, sondern auch zur Verbesserung visueller Effekte.

Hervorhebung eines Teils des Bildes

Es ist nützlich, wenn Sie sich auf einen bestimmten Teil des Bildes konzentrieren möchten, anstatt das gesamte Bild anzuzeigen. Setzen Sie object-fit auf cover und verwenden Sie object-position, um sich auf einen bestimmten Bereich zu konzentrieren.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • In diesem Beispiel wird der untere linke Teil des Bildes angezeigt, der wichtige Teile hervorhebt.
Beim Verwenden eines Videos als Hintergrund

object-position erweist sich auch als nützlich, wenn ein Video als Hintergrund verwendet wird. Sie können das Video an einer bestimmten Position platzieren, um die Konsistenz mit dem gesamten Seitenlayout zu gewährleisten.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • In dieser Einstellung passt sich das Video der gesamten Seite an und ist oben zentriert positioniert.

Häufige Probleme und Lösungen

Bei der Verwendung von object-position können einige Probleme auftreten. Hier stellen wir häufige Probleme und deren Lösungen vor.

Ein Teil des Bildes ist abgeschnitten

Bei der Verwendung von object-fit: cover kann das Bild zugeschnitten werden, um in den Container zu passen. In diesem Fall können Sie durch Anpassen der Anzeigeposition mit object-position sicherstellen, dass wichtige Teile sichtbar sind.

1img {
2    object-fit: cover;
3    object-position: center;
4}
Die Bildposition ist nicht wie erwartet

Prozentangaben sind möglicherweise nicht immer intuitiv. Es ist notwendig, die Größe und das Seitenverhältnis des Containers zu berücksichtigen und mit verschiedenen Werten zu experimentieren. Die Verwendung von Entwickler-Tools zur Echtzeitanpassung ist effektiv.

Zusammenfassung

object-position ist ein leistungsstarkes Werkzeug, um Medienelemente frei zu positionieren. Durch die Kombination mit object-fit können flexible Layouts gemäß dem Design erreicht werden. Beherrschen Sie Schlüsselwörter, Prozentsätze und Längeneinheiten, um visuelle Effekte in verschiedenen Situationen zu maximieren.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

`overflow`- und `contain`-Eigenschaften