Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
object-fit
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
La propiedadCSSobject-fit indica cómo el contenido de unelemento reemplazado, por ejemplo un<img> o<video>, debería redimensionarse para ajustarse a su contenedor.
Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedadobject-position.
Pruébalo
object-fit: fill;object-fit: contain;object-fit: cover;object-fit: none;object-fit: scale-down;<section> <img src="/shared-assets/images/examples/plumeria-146x200.jpg" /></section>#example-element { height: 100%; width: 100%; border: 2px dotted #888;}Sintaxis
La propiedadobject-fit se especifica con una de las palabras claves elegidas de la siguiente lista de valores.
Valores
containEl 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.
coverEl contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. 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.
fillModifica 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.
noneEl contenido reemplazado no se redimensiona.
scale-downEl contenido se dimensiona como si
noneocontainestuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.
Sintaxis formal
object-fit =
fill|
none|
[contain|cover]||scale-down
Ejemplo
HTML
<section> <h2>object-fit: fill</h2> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: contain</h2> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: cover</h2> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: none</h2> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: scale-down</h2> <img src="mdn_logo_only_color.png" alt="MDN Logo" /> <img src="mdn_logo_only_color.png" alt="MDN Logo" /></section>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: 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;}Resultado
Especificaciones
| Specification |
|---|
| CSS Images Module Level 3 # the-object-fit |
Compatibilidad con navegadores
Ver también
- Otras propiedades CSS relacionadas con imágenes:
object-position,image-orientation,image-rendering,image-resolution. background-size