From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/object-position/index.html | 150 ++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/es/web/css/object-position/index.html (limited to 'files/es/web/css/object-position/index.html') diff --git a/files/es/web/css/object-position/index.html b/files/es/web/css/object-position/index.html new file mode 100644 index 0000000000..0d76669bdc --- /dev/null +++ b/files/es/web/css/object-position/index.html @@ -0,0 +1,150 @@ +--- +title: object-position +slug: Web/CSS/object-position +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

Summary

+ +

La propiedad object-position determina el alineamiento del elemento dentro de la caja.

+ +

{{cssinfo}}

+ +

Sinstaxis

+ +
/* <position> valores */
+object-position: 100px 50px;
+
+/* Valores globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

Valores

+ +
+
<position>
+
{{ cssxref("<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.
+
+ +

Sitaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Ejemplo de HTML

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+
+ +

Ejemplo de CSS

+ +
img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 360, 120) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}} +

Las  palabras clave from-image y flip an sido añadidas.

+
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Definición incial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}
+ 19.0
{{ CompatNo }}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}
+ 24
{{ CompatNo }}
+
+[1] WebKit Nightly fixed in bug 122811.
+ +

Contenido relacionado

+ + -- cgit v1.2.3-54-g00ecf