1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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>
{{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"><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>
|
