object-position
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
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 |
Sintaxis
css
/* <position> valores */
object-position: 100px 50px;
/* Valores globales */
object-position: inherit;
object-position: initial;
object-position: unset;
Valores
<position>-
<position>, 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> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
Ejemplo
Ejemplo de HTML
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
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
Loading…
Contenido relacionado
- Other image-related CSS properties:
object-fit,image-orientation,image-rendering,image-resolution.