Propiedades `object-fit` y `object-position`

Articles

Este artículo explica las propiedades object-fit y object-position.

Puedes aprender cómo organizar objetos como imágenes y videos y cómo escribirlos en CSS.

YouTube Video

HTML para vista previa

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Relacionado con el ajuste de objetos

Propiedad `object-fit`

La propiedad object-fit de CSS se utiliza principalmente para controlar cómo las imágenes, videos y otros contenidos se ajustan dentro de sus elementos contenedores. Al usar esta propiedad, puedes especificar de manera flexible cómo se redimensionan y posicionan estéticamente los elementos especificados. Es muy útil para ajustar la visualización de imágenes o videos recortando o escalando cuando no encajan dentro del elemento padre.

Valores de `object-fit`

`fill` (Valor predeterminado)

1img {
2  object-fit: fill;
3}

fill es el valor predeterminado, donde las imágenes o videos se estiran forzosamente para ajustarse completamente al ancho y alto del elemento padre. En este caso, se ignora la relación de aspecto original, lo que puede causar distorsión en la imagen.

Encaja completamente en el tamaño del elemento padre.
Debido a que se ignora la relación de aspecto, las imágenes o videos pueden estirarse vertical u horizontalmente.

`contain`

1img {
2  object-fit: contain;
3}

contain redimensiona el contenido de modo que encaje completamente dentro del elemento padre mientras se preserva la relación de aspecto. No supera el tamaño del elemento padre, y puede haber espacio en blanco en los lados verticales u horizontales.

Se muestra todo el contenido.
Para mantener la relación de aspecto original, puede aparecer un espacio en blanco (efecto letterbox o pillarbox).

`cover`

1img {
2  object-fit: cover;
3}

cover redimensiona el contenido para cubrir completamente el elemento padre mientras se mantiene la relación de aspecto. Parte del contenido puede recortarse para ajustarse al elemento padre, pero todo el elemento llena el contenedor, por lo que no hay espacios vacíos.

El contenido cubre completamente el elemento padre.
Puede recortarse mientras se mantiene la relación de aspecto original.
Comúnmente utilizado para imágenes de fondo o imágenes de la sección hero.

`none`

1img {
2  object-fit: none;
3}

none muestra las imágenes o videos en su tamaño y relación de aspecto original. No se ajusta al tamaño del elemento padre, y el contenido puede desbordarse si es necesario.

Se mantiene el tamaño original del contenido.
No se realiza ningún cambio de tamaño para ajustar el contenido al elemento padre.

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down es un valor que combina el comportamiento de none y contain. Si el contenido cabe en el elemento padre, actúa como none, pero si el contenido es demasiado grande, aplica el comportamiento de contain y se reduce para ajustarse.

El contenido se reduce si es más grande que el elemento padre.
Se muestra en su tamaño original si es más pequeño.

Uso de Ejemplo

Ajustar imágenes de fondo al elemento padre

Por ejemplo, para extender una imagen por toda la pantalla teniendo en cuenta el diseño responsivo, es común usar cover. El siguiente código es un ejemplo de ajustar una imagen perfectamente dentro del elemento padre, incluso si se recorta.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

En este caso, la imagen cubre completamente el elemento padre, manteniendo un diseño atractivo en cualquier tamaño de pantalla. Si la relación de aspecto es diferente, algunas partes de la imagen pueden no ser visibles, pero se logra una presentación adecuada para el diseño.

Mostrar imágenes manteniendo la proporción de aspecto

A continuación, si deseas ajustar toda la imagen en el elemento padre manteniendo su relación de aspecto, contain es adecuado.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

En este ejemplo, la imagen se reduce para ajustarse al contenedor, lo que genera un espacio adicional, pero la imagen original se muestra sin distorsión.

Errores comunes

Un error común al usar object-fit es no establecer el tamaño del elemento padre. object-fit es una propiedad para ajustar el contenido al elemento padre, por lo que si el tamaño del elemento padre no está definido, no se puede lograr el efecto esperado. Asegúrate de que el elemento padre tenga configurado correctamente width o height.

Por ejemplo, en el siguiente código, la altura del elemento padre no está especificada, por lo que object-fit no funciona como se espera.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

En este caso, necesitas especificar la altura del elemento padre o ajustar todo el diseño usando flexbox o grid layout.

Situaciones donde se debe usar `object-fit`

object-fit es importante, especialmente en el diseño responsivo y en sitios web que se adaptan a varios tamaños de pantalla. Por ejemplo, es útil en los siguientes casos:.

Cuando quieres ajustar imágenes o videos para que se muestren correctamente en diferentes dispositivos
Cuando quieres mostrar imágenes de fondo o similares en pantalla completa permitiendo recortes
Cuando quieres ajustar una imagen en un elemento padre manteniendo su proporción de aspecto
Cuando deseas mostrar tamaños de imagen de manera consistente, como en galerías

Usar object-fit en estas situaciones puede mantener la consistencia del diseño y mejorar la experiencia del usuario.

Resumen

object-fit es una potente propiedad de CSS que te permite controlar de manera flexible cómo se muestran imágenes y videos en relación con sus elementos padre en una página web. Al usar distintos valores como fill, contain, cover, none y scale-down, puedes cumplir con varios requisitos de diseño. Al comprender cómo usarlo correctamente y aplicarlo adecuadamente, puedes lograr diseños visualmente atractivos.

Domina el uso de object-fit para crear diseños responsivos y estéticamente agradables.

Propiedad `object-position`

La propiedad CSS object-position se utiliza para controlar la posición del contenido, como imágenes y videos, dentro de un elemento. Usando object-position, puedes colocar el contenido en puntos específicos y proporcionar efectos visuales que se ajusten al diseño.

Visión general de `object-position`

object-position se aplica principalmente a elementos multimedia como etiquetas <img> y <video>. Esta propiedad controla dónde se muestra el contenido multimedia dentro de su contenedor. object-fit se usa a menudo junto con object-position, donde object-fit define cómo una imagen o video se ajusta al tamaño del marco, y object-position ajusta la posición de visualización del contenido.

1img {
2    object-fit: cover;
3    object-position: center;
4}

En este ejemplo, la imagen se escala para ajustarse al contenedor (object-fit: cover) y se posiciona de manera que su centro quede visible (object-position: center).

Cómo Especificar Valores

object-position se especifica con dos valores de la siguiente manera.

Posición horizontal (eje X)
Posición vertical (eje Y)

Formato de Especificación de Valor

En object-position, puedes especificar valores en el siguiente formato.

Palabras clave: top, right, bottom, left, center
Porcentaje: de 0% a 100%
Unidades de longitud: px, em, rem, etc.

Por ejemplo, puedes usarlo así.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

Combinación de Palabras Clave y Porcentajes

También es posible combinar palabras clave y porcentajes.

1img {
2    object-position: right 50%;
3}

En este ejemplo, la imagen se coloca en el borde derecho y está centrada verticalmente al 50%. Esta combinación es muy útil cuando se necesita un posicionamiento flexible.

Combinación con `object-fit`

object-position se usa a menudo junto con object-fit. object-fit determina cómo se redimensiona una imagen o video en relación con su marco. Por ejemplo, usar object-fit: cover recorta la imagen para ajustarla al marco y la posiciona según el object-position especificado.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

En este ejemplo, la imagen se extiende por todo el contenedor, mostrando la parte inferior derecha del contenido.

Ejemplos Combinados con Valores de `object-fit`

fill: La imagen puede distorsionarse, pero se ajusta a todo el contenedor.
contain: La imagen completa se muestra manteniendo la relación de aspecto.
cover: Recortado para ajustarse al contenedor, manteniendo la relación de aspecto.
none: La imagen se muestra en su tamaño original.

1img {
2    object-fit: contain;
3    object-position: top;
4}

En esta configuración, la imagen se coloca en la parte superior del contenedor y se muestra toda la imagen.

Uso Avanzado

object-position se puede aplicar en varios escenarios no solo para ajustes simples de posicionamiento, sino también para mejorar efectos visuales.

Enfatizando una Parte de la Imagen

Es útil cuando deseas enfocarte en una parte específica de la imagen en lugar de mostrarla completa. Configura object-fit como cover y utiliza object-position para enfocarte en una área específica.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

En este ejemplo, se muestra la parte inferior izquierda de la imagen, enfatizando partes importantes.

Cuando se usa un video como fondo

object-position también resulta útil al usar un video como fondo. Puede posicionar el video en un lugar específico para mantener la coherencia con el diseño general de la página.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

En esta configuración, el video ocupa toda la página y está posicionado en el centro superior.

Problemas comunes y soluciones

Puede haber algunos problemas al usar object-position. Aquí presentamos problemas comunes y sus soluciones.

Parte de la imagen está recortada

Al usar object-fit: cover, la imagen puede recortarse para ajustarse al contenedor. En este caso, ajustando la posición con object-position, puede asegurarse de que las partes importantes se muestren.

1img {
2    object-fit: cover;
3    object-position: center;
4}

La posición de la imagen no es la esperada

Las especificaciones en porcentajes no siempre son intuitivas. Es necesario considerar el tamaño y la relación de aspecto del contenedor y experimentar con diferentes valores. El uso de herramientas de desarrollo para ajustar en tiempo real es efectivo.

Resumen

object-position es una herramienta poderosa para posicionar elementos multimedia libremente. Al combinarlo con object-fit, se pueden lograr diseños flexibles adaptados al diseño. Domine palabras clave, porcentajes y unidades de longitud para maximizar los efectos visuales en diversas situaciones.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades `overflow` y `contain`

Propiedades `object-fit` y `object-position`

YouTube Video

HTML para vista previa

Relacionado con el ajuste de objetos

Propiedad object-fit

Valores de object-fit

fill (Valor predeterminado)

contain

cover

none

scale-down

Uso de Ejemplo

Ajustar imágenes de fondo al elemento padre

Mostrar imágenes manteniendo la proporción de aspecto

Errores comunes

Situaciones donde se debe usar object-fit

Resumen

Propiedad object-position

Visión general de object-position

Cómo Especificar Valores

Formato de Especificación de Valor

Combinación de Palabras Clave y Porcentajes

Combinación con object-fit

Ejemplos Combinados con Valores de object-fit

Uso Avanzado

Enfatizando una Parte de la Imagen

Cuando se usa un video como fondo

Problemas comunes y soluciones

Parte de la imagen está recortada

La posición de la imagen no es la esperada

Resumen

YouTube Video

Propiedad `object-fit`

Valores de `object-fit`

`fill` (Valor predeterminado)

`contain`

`cover`

`none`

`scale-down`

Situaciones donde se debe usar `object-fit`

Propiedad `object-position`

Visión general de `object-position`

Combinación con `object-fit`

Ejemplos Combinados con Valores de `object-fit`