---
title: object-fit
slug: Web/CSS/object-fit
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Image
  - Grafik
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/object-fit
---
<div>{{ CSSRef }}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>object-fit</code> CSS Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements an die Box angepasst werden, die durch dessen verwendeter Höhe und Breite erzeugt wird.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

{{csssyntax}}

<pre><code>object-fit: fill</code>
<code>object-fit: contain</code>
<code>object-fit: cover</code>
<code>object-fit: none</code>
<code>object-fit: scale-down</code>
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>fill</code></dt>
 <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass er die Inhaltsbox des Elements ausfüllt: die konkrete Objektgröße entspricht der verwendeten Breite und Höhe des Elements.</dd>
 <dt><code>contain</code></dt>
 <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgröße wird als eine Inhaltsbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.</dd>
 <dt><code>cover</code></dt>
 <dd>Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgröße wird als eine Abdeckbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.</dd>
 <dt><code>none</code></dt>
 <dd>Der ersetzte Inhalt wird nicht in der Größe angepasst, um in die Inhaltsbox des Elements zu passen: die konkrete Objektgröße wird durch den Standardalgorithmus zur Größenanpassung und eine Standardobjektgröße gleich der verwendeten Breite und Höhe des ersetzten Elements bestimmt.</dd>
 <dt><code>scale-down</code></dt>
 <dd>Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.</dd>
</dl>

<h2 id="Beispiel">Beispiel</h2>

<h3 id="HTML_Inhalt">HTML Inhalt</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;

  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;

  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;

  &lt;h2&gt;object-fit: none&lt;/h2&gt;
  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;

  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
&lt;/div&gt;</pre>

<h3 id="CSS_Inhalt">CSS Inhalt</h3>

<pre class="brush: css">h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 450px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
</pre>

<h3 id="Ausgabe">Ausgabe</h3>

<p>{{ EmbedLiveSample('Beispiel', 500, 450) }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>Die Schlüsselwörter <code>from-image</code> und <code>flip</code> wurden hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Ursprüngliche Spezifikation</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.properties.object-fit")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Andere Bild bezogene CSS Eigenschaften: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
</ul>