Propiedad object-position CSS
- Página anterior Propiedad object-fit CSS
- Página siguiente Máscaras CSS
CSS object-position propiedad se utiliza para especificar la ubicación de <img> o <video> dentro de su contenedor.
imagen
Vea la siguiente imagen de Wuhan, de 600x400 píxeles:
A continuación, utilizamos object-fit: cover; para mantener la proporción de aspecto y rellenar el tamaño dado. Sin embargo, la imagen se recortará para adaptarse, como se muestra a continuación:
Ejemplo
img {
width: 266px;
height: 400px;
object-fit: cover;
}
utilizar la propiedad object-position
Supongamos que la parte de la imagen que se muestra no es la que deseamos. Para ubicar la imagen, utilizaremos object-position propiedad.
Aquí, utilizaremos object-position la propiedad para ubicar la imagen, haciendo que el antiguo edificio esté en el centro:
Ejemplo
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Aquí, utilizaremos object-position Utilice propiedades para posicionar la imagen, de modo que el icónico ángulo del Palacio del Cielo esté a la derecha:
Ejemplo
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
Propiedades CSS object-*
La siguiente tabla enumera las propiedades CSS object-*:
| Atributo | Descripción |
|---|---|
| object-fit | Especificar cómo <img> o <video> deben ajustar su tamaño para adaptarse a su contenedor. |
| object-position | Especificar cómo <img> o <video> deben posicionarse dentro de su cuadro de contenido propio mediante coordenadas x/y. |
- Página anterior Propiedad object-fit CSS
- Página siguiente Máscaras CSS
