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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
---
title: object-fit
slug: Web/CSS/object-fit
tags:
- CSS
- Imágenes CSS
- Layout
- Propiedad CSS
- Referencia
- css layout
- object-fit
- 'recipe:css-property'
- size
translation_of: Web/CSS/object-fit
---
<div>{{CSSRef}}</div>
<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> indica cómo el contenido de un <a href="/es/docs/Web/CSS/Elemento_reemplazo">elemento reemplazado</a>, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.</p>
<p>Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
<h2 id="Sintaxis">Sintaxis</h2>
<p>La propiedad <code>object-fit</code> se especifica con una de las palabras claves elegidas de la siguiente lista de valores.</p>
<h3 id="Valores" name="Valores">Valores</h3>
<dl>
<dt><code>contain</code></dt>
<dd>El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.</dd>
<dt><code>cover</code></dt>
<dd><span class="tlid-translation translation" lang="es"><span title="">El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento.</span> <span title="">Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.</span></span></dd>
<dt><code>fill</code></dt>
<dd>Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.</dd>
<dt><code>none</code></dt>
<dd>El contenido reemplazado no se redimensiona.</dd>
<dt><code>scale-down</code></dt>
<dd><span class="tlid-translation translation" lang="es"><span title="">El contenido se dimensiona como si <code>none</code> o <code>contain</code> estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.</span></span></dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><section>
<h2>object-fit: fill</h2>
<img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: contain</h2>
<img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: cover</h2>
<img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: none</h2>
<img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: scale-down</h2>
<img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
</section></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">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: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.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="Resultado">Resultado</h3>
<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
<h2 id="Specifications" name="Specifications">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Definicion inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad</h2>
<p>{{Compat("css.properties.object-fit")}}</p>
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li>Otras propiedades CSS relacionadas con imágenes: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
<li>{{cssxref("background-size")}}</li>
</ul>
|
