CSS La propiedad de posición de objeto
La propiedad CSS object-position
se usa para especificar cómo se debe colocar un <img> o un <video> dentro de su contenedor.
La imagen
Mira la siguiente imagen de París, que es de 400x300 píxeles:
A continuación, usamos object-fit: cover;
para mantener la relación de aspecto y para llenar la dimensión dada. Sin embargo, la imagen se recortará para que quepa, así:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Uso de la propiedad de posición de objeto
Digamos que la parte de la imagen que se muestra, no está posicionada como queremos. Para posicionar la imagen, usaremos la object-position
propiedad.
Aquí usaremos la object-position
propiedad para colocar la imagen de modo que el gran edificio antiguo esté en el centro:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Aquí usaremos la object-position
propiedad para colocar la imagen de modo que la famosa Torre Eiffel esté en el centro:
Ejemplo
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
Objeto CSS-* Propiedades
La siguiente tabla enumera las propiedades del objeto CSS-*:
Property | Description |
---|---|
object-fit | Specifies how an <img> or <video> should be resized to fit its container |
object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |