La propiedad CSS object-fit
especifica cómo se debe ajustar el contenido de un elemento reemplazado a la caja establecida por su altura y ancho utilizados.
Ejemplo
HTML:
<div>
<h2>object-fit: fill</h2>
<img width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="fill"/>
<img width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="fill narrow"/>
<h2>object-fit: contain</h2>
<img width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="contain"/>
<img width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="contain narrow"/>
<h2>object-fit: cover</h2>
<img width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="cover"/>
<img width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="cover narrow"/>
<h2>object-fit: none</h2>
<img width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="none"/>
<img width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="none narrow"/>
<h2>object-fit: scale-down</h2>
<img width="60" height="60" src="https://www.onlinewebfonts.com/style/user.png" alt="example" class="scale-down"/>
<img width="60" height="60" src="https://pic.onlinewebfonts.com/svg/thumbnails_60_573798.png" alt="example" class="scale-down narrow"/>
</div>
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;
}
PRODUCCIÓN:
Te dejo la página de fiddle para que veas cómo funciona el ejemplo.
Sintaxis
/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;
Valores
fill
El contenido reemplazado se dimensiona para llenar el cuadro de contenido del elemento: el tamaño del objeto concreto del objeto es el ancho y la altura usados del elemento.
contain
El contenido reemplazado se dimensiona 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.
cover
El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena todo el cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de cobertura contra el ancho y la altura usados del elemento.
none
El contenido reemplazado no se redimensiona para que quepa dentro del cuadro de contenido del elemento: el tamaño concreto del objeto del objeto se determina utilizando el algoritmo de tamaño predeterminado sin un tamaño especificado y un tamaño de objeto predeterminado igual al ancho y alto usados del elemento reemplazado.
scale-down
El contenido se dimensiona como si se especificara none
o contain
, lo que resulte en un tamaño de objeto concreto más pequeño.
Sintaxis formal
fill | contain | cover | none | scale-down
Descripción
La propiedad CSS object-fitespecifica cómo se debe ajustar el contenido de un elemento reemplazado a la caja establecida por su altura y ancho utilizados.
Compatibilidad del navegador
Fuentes de consulta: https://reference.codeproject.com/css/object-fit (inglés)
Salu2 y bendiciones, Atte, Angel Paz | ![]() |