object-position
Summary
La propiedad object-position
determina el alineamiento del elemento dentro de la caja.
Valor inicial | 50% 50% |
---|---|
Applies to | replaced elements |
Heredable | yes |
Percentages | refer to width and height of element itself |
Valor calculado | como se especifica |
Animation type | a repeatable list of |
Sintaxis
/* <position> valores */
object-position: 100px 50px;
/* Valores globales */
object-position: inherit;
object-position: initial;
object-position: unset;
Valores
<position>
-
<position>
(en-US), este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.
Sintaxis formal
object-position =
<position>
<position> =
[ left | center | right ] || [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<length-percentage> =
<length> |
<percentage>
Ejemplo
Ejemplo de HTML
<img id="object-position-1" src="mdn.svg" alt="MDN Logo"/>
<img id="object-position-2" src="mdn.svg" alt="MDN Logo"/>
Ejemplo de CSS
img {
width: 300px;
height: 250px;
border: 1px solid black;
background-color: silver;
margin-right: 1em;
object-fit: none;
}
#object-position-1 {
object-position: 10px;
}
#object-position-2 {
object-position: 100% 10%;
}
Resultado
Especificaciones
Specification |
---|
CSS Images Module Level 3 # the-object-position |
Compatibilidad con navegadores
BCD tables only load in the browser
Contenido relacionado
- Other image-related CSS properties:
object-fit
,image-orientation
(en-US),image-rendering
,image-resolution
(en-US).