Propiedad de posición de objeto CSS
Ejemplo
Cambie el tamaño de una imagen para que se ajuste a su cuadro de contenido y coloque la imagen 5 px desde la izquierda y un 10 % desde la parte superior dentro del cuadro de contenido:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Definición y uso
La object-position
propiedad se usa junto con object-fit para especificar cómo se debe colocar un <img> o <video> con las coordenadas x/y dentro de su "propio cuadro de contenido".
Valor por defecto: | 50% 50% |
---|---|
Heredado: | sí |
Animable: | si. Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .style.objectPosition="0 10%" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Sintaxis CSS
object-position: position|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
páginas relacionadas
Tutorial de CSS: ajuste de objetos CSS
Referencia de CSS: ajuste de objeto CSS
Referencia HTML DOM: la propiedad objectPosition