Table of contents
La propiedad object-position se usa para especificar cómo se debe colocar una
<img>o<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 llenar la dimensión dada. Sin embargo, la imagen se recortará para que quepa, así:
Ejemplo:
img {
width: 200px;
height: 300px;
object-fit: cover;
}
La propiedad object-position
Digamos que la parte de la imagen que se muestra, no está posicionada como queremos. Para posicionar la imagen, usaremos la propiedad object-position.
Aquí usaremos la propiedad object-position 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 propiedad object-position para posicionar 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%;
}
Las propiedades object
La siguiente tabla enumera las propiedades object:
| Propiedad | Descripción |
object-fit | Especifica cómo se debe cambiar el tamaño de una <img> o <video> para que se ajuste a su contenedor. |
object-position | Especifica cómo debe colocarse una <img> o <video> con las coordenadas x/y dentro de su "propio cuadro de contenido". |
Traducido con 💚 desde W3Schools.com