diff options
Diffstat (limited to 'files/de/web/css/object-fit/index.html')
| -rw-r--r-- | files/de/web/css/object-fit/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/de/web/css/object-fit/index.html b/files/de/web/css/object-fit/index.html new file mode 100644 index 0000000000..7fbbc5267e --- /dev/null +++ b/files/de/web/css/object-fit/index.html @@ -0,0 +1,148 @@ +--- +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> + +<pre class="twopartsyntaxbox">{{csssyntax}}</pre> + +<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"><div> + <h2>object-fit: fill</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> + + <h2>object-fit: contain</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + + <h2>object-fit: cover</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + + <h2>object-fit: none</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + + <h2>object-fit: scale-down</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> +</div></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> |