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-fit/index.html | 164 +++++++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/es/web/css/object-fit/index.html (limited to 'files/es/web/css/object-fit/index.html') diff --git a/files/es/web/css/object-fit/index.html b/files/es/web/css/object-fit/index.html new file mode 100644 index 0000000000..0239910a6b --- /dev/null +++ b/files/es/web/css/object-fit/index.html @@ -0,0 +1,164 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - Imágenes CSS + - Layout + - Propiedad CSS + - Referencia + - css layout + - object-fit + - 'recipe:css-property' + - size +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La propiedad CSS object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.

+ +

Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ +

Sintaxis

+ +

La propiedad object-fit se especifica con una de las palabras claves elegidas de la siguiente lista de valores.

+ +

Valores

+ +
+
contain
+
El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.
+
cover
+
El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.
+
fill
+
Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.
+
none
+
El contenido reemplazado no se redimensiona.
+
scale-down
+
El contenido se dimensiona como si none o contain estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<section>
+  <h2>object-fit: fill</h2>
+  <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: contain</h2>
+  <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: cover</h2>
+  <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: none</h2>
+  <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: scale-down</h2>
+  <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+</section>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Definicion inicial.
+ +

Compatibilidad

+ +

{{Compat("css.properties.object-fit")}}

+ +

Ver también

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