Propiedad CSS object-fit
- Página anterior Estilos de imágenes CSS
- Página siguiente object-position CSS
CSS object-fit Recomendaciones de cursos:
La propiedad se utiliza para especificar cómo ajustar el tamaño de <img> o <video> para que se ajuste a su contenedor.
Compatibilidad del navegador
| La tabla de números indica la versión inicial del navegador que admite completamente esta propiedad. | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Propiedad CSS object-fit
CSS object-fit La propiedad se utiliza para especificar cómo ajustar el tamaño de <img> o <video> para que se ajuste a su contenedor.
Esta propiedad le dice cómo llenar el contenedor del contenido de diferentes maneras. Por ejemplo, 'conservar la proporción de aspecto' o 'expandirse y ocupar tanto espacio como sea posible'.
Mire la imagen de un tulipán de la Granja de Flores de Shanghái, que es de 300x300 píxeles:
Pero, si configuramos la imagen superior en 200x300 píxeles, se verá así:
Ejemplo
img {
width: 200px;
height: 300px;
}
Vemos que la imagen se comprime para ajustarse al contenedor de 200x300 píxeles y se rompe la proporción original de aspecto.
Si utilizamos object-fit: cover;que cortará los lados de la imagen, conservará la proporción de aspecto y llenará el espacio, como se muestra a continuación:
Ejemplo
img {
width: 200px;
height: 400px;
object-fit: cover;
}
Otro ejemplo
Aquí, tenemos dos imágenes y queremos que llenen el 50% del ancho y el 100% de la altura de la ventana del navegador.
En el siguiente ejemplo, no utilizamos object-fitPor lo tanto, cuando ajustamos el tamaño de la ventana del navegador, la proporción de aspecto de la imagen se romperá:
Ejemplo
En el siguiente ejemplo, utilizamos object-fit: cover;Por lo tanto, cuando ajustamos el tamaño de la ventana del navegador, se conservará la proporción de aspecto de la imagen:
Ejemplo
Todos los valores de la propiedad CSS object-fit
object-fit La propiedad puede aceptar los siguientes valores:
fill- Valor predeterminado. Ajuste el tamaño del contenido reemplazado para llenar el cuadro de contenido del elemento. Si es necesario, estire o comprima el objeto para adaptarse a este objeto.contain- Escala el contenido reemplazado para mantener la proporción de aspecto, al mismo tiempo, póngalo en el cuadro de contenido del elemento.cover- Ajuste el tamaño del contenido reemplazado para mantener la proporción de aspecto del cuadro de contenido completo del elemento.none- No ajuste el tamaño del contenido de reemplazo.scale-down- Ajuste del tamaño del contenido como si no se hubiera especificado contenido o contenido que contenga (lo que resultará en un tamaño físico del objeto más pequeño)
Los siguientes ejemplos demuestran object-fit Todos los valores posibles de la propiedad:
Ejemplo
fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}
- Página anterior Estilos de imágenes CSS
- Página siguiente object-position CSS
