diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/css/object-position | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/web/css/object-position')
-rw-r--r-- | files/es/web/css/object-position/index.html | 150 |
1 files changed, 150 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>La propiedad <strong><code>object-position</code></strong> determina el alineamiento del elemento dentro de la caja.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sinstaxis</h2> + +<pre class="brush:css">/* <position> valores */ +object-position: 100px 50px; + +/* Valores globales */ +object-position: inherit; +object-position: initial; +object-position: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><position></code></dt> + <dd>{{ 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.</dd> +</dl> + +<h3 id="Sitaxis_formal">Sitaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h4 id="Ejemplo_de_HTML">Ejemplo de HTML</h4> + +<pre class="brush: 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"/> +</pre> + +<h4 id="Ejemplo_de_CSS">Ejemplo de CSS</h4> + +<pre class="brush: 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%; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{ EmbedLiveSample('Example', 360, 120) }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> + <p>Las <code>palabras clave from-image</code> y <code>flip</code> an sido añadidas.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Definición incial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>31.0</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.60{{ property_prefix("-o") }}<br> + 19.0</td> + <td>{{ CompatNo }}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.4.4</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.5{{ property_prefix("-o") }}<br> + 24</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +<br> +[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div> + +<h2 id="See_also" name="See_also">Contenido relacionado</h2> + +<ul> + <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> |