Al insertar en un documento HTML algunos objetos como imágenes a través de la etiqueta <img>
, elementos multimedia a través de <video>
u otros como <textarea>
o <input>
, dichos elementos tienen su propia forma de mostrarse en pantalla ya que tienen características ajenas a CSS.
Por dicha razón, muchas veces tienen un tamaño inicial que no encaja con el uso que queremos darle, no se adapta a las cajas o contenedores que usamos o no funciona como tenemos previsto que lo haga.
Propiedades para objetos
Sin embargo, existen algunas propiedades en CSS que nos permiten modificar ciertos aspectos de muchos de estos elementos, pudiendo darle estilo y adaptarlos.
Aquí puedes ver una tabla resumen de las propiedades que vamos a analizar:
Propiedad | Valores | Descripción |
---|---|---|
object-fit | fill | contain | cover | none | scale-down | Modo en que se adapta el elemento. |
object-position | Posición (x,y) del elemento. | |
object-view-box | Región del elemento se visualizará. |
Veamos detalladamente, una por una.
La propiedad object-fit
La propiedad object-fit
nos va a permitir cambiar el modo en el que se rellena o adapta una imagen <img>
(o cualquier otro objeto de representación externa a CSS) en su contenedor padre o en si mismo. Los valores que puede tomar dicha propiedad son los siguientes:
Valor | Descripción |
---|---|
fill | «Rellena» la imagen ocupando todo el espacio. Habitualmente, se produce un estiramiento de la imagen. |
cover | Mantiene proporción, cubriendo lo máximo posible, sin que queden huecos sin cubrir. Suele ocultar partes. |
contain | Mantiene proporción, conteniendo el máximo posible de la imagen. Suelen sobrar partes. |
none | Mantiene el aspecto natural. |
scale-down | Similar a contain , pero si la imagen es más pequeña, no la amplía. |
Imaginemos que una imagen, que tiene su propio tamaño, es notablemente superior que los elementos contenedores (o el tamaño) que lo va a contener. Por defecto, la imagen tiene su propio tamaño y se desbordará, pero nos podría interesar cambiar su tamaño de alto y/o ancho para que se adapte.
Para ello, utilizaremos los diferentes valores de la propiedad object-fit
:
Así pues, podemos plantear el siguiente código de ejemplo, donde se puede utilizar la propiedad object-fit
con sus diferentes valores y comprobar como se comporta:
.parent {
display: flex;
}
.item {
margin: 10px;
width: 150px;
height: 150px;
background: lightgrey;
}
.item-1 { object-fit: fill; }
.item-2 { object-fit: cover; }
.item-3 { object-fit: contain; }
.item-4 { object-fit: scale-down; }
.item-5 { object-fit: none; }
<div class="parent">
<img class="item item-1" src="cat.jpg" alt="Cat">
<img class="item item-2" src="cat.jpg" alt="Cat">
<img class="item item-3" src="cat.jpg" alt="Cat">
<img class="item item-4" src="cat.jpg" alt="Cat">
<img class="item item-5" src="cat.jpg" alt="Cat">
</div>
La propiedad object-position
Además, tenemos la propiedad object-position
que nos sirve para utilizar junto a la propiedad object-fit
y cambiar la posición donde aparece la imagen, especialmente cuando está recortada y sólo aparece un fragmento o parte de la imagen. La propiedad funciona de forma muy parecida a como lo hace la propiedad background-position
:
Valor | Descripción |
---|---|
50% 50% | Por defecto, la imagen está centrada tanto en X como en Y . |
Se puede indicar un porcentaje para colocarlo en el eje correspondiente. |
También se pueden indicar palabras clave como top
, left
, right
, bottom
o center
para indicar en que zona quieres centrar la imagen, incluso, añadiendo un porcentaje tras ellos para ajustar más concretamente:
.container {
--size: 256px;
display: flex;
gap: 1rem;
}
img {
width: var(--size);
height: var(--size);
object-fit: none;
}
.normal { object-position: 50% 50%; }
.positioned { object-position: left 50% top 0%; }
<div class="container">
<img class="normal" src="bad-manzdev.png" alt="Bad ManzDev">
<img class="positioned" src="bad-manzdev.png" alt="Bad ManzDev">
</div>
La propiedad object-view-box
La propiedad object-view-box
nos permite indicar al navegador la región visible de un elemento a visualizar, es decir, su viewbox
(caja de visualización). Con esta herramienta a nuestra disposición, podremos mostrar sólo una parte de una imagen o video, o incluso hacer zoom con animaciones si activamos las transiciones.
Para ello, utilizaremos por ejemplo, la función inset()
para determinar la región que recortaremos. Esta función trabaja exactamente de la misma forma que explicamos en el apartado recortes con clip-path.
.container img {
width: 256px;
height: 256px;
transition: all 0.5s;
object-view-box: inset(0% 0% 0% 0%);
}
/* Al mover el ratón por encima... */
.container img:hover {
object-view-box: inset(20% 20% 20% 20%);
}
<div class="container">
<img src="bad-manzdev.png" alt="Bad ManzDev">
</div>
Estamos utilizando 4 parámetros en la función
inset()
. Si son el mismo, se puede resumir en un sólo parámetro. Para suavizar el cambio estamos usando trasiciones, que las explicamos en el apartado de Transiciones CSS.
En el ejemplo superior, recortamos la imagen un 25%
por cada lado, es decir, top right bottom left
, en el sentido de las agujas del reloj. Si quieres aprender a utilizarla, incluso con animaciones, echa un vistazo al siguiente video:
Propiedades para imágenes
Propiedad | Valores | Descripción |
---|---|---|
image-rendering | auto | smooth | high-quality | crisp-edges | pixelated | Algoritmo de escalado a utilizar. |
image-orientation | from-image | none | | Orientación de la imagen. |
aspect-ratio | auto | | Define la proporción de aspecto. |
La propiedad image-rendering
La propiedad image-rendering
permite indicar al navegador como se debería renderizar una imagen, y más concretamente, que algoritmo de reescalado se debería aplicar. Por lo general, este valor lo utilizará correctamente el navegador, pero en algunas situaciones, al cambiar de tamaño a ciertas imágenes, es posible que se vean con una menor calidad o con defectos como bordes borrosos o ciertas imperfecciones.
Con la propiedad image-rendering
indicamos al navegador que sistema de reescalado debe utilizar, algo muy interesante cuando utilizamos por ejemplo, imágenes pixel art, donde nos interesa que se utilicen algoritmos como nearest neighbour (vecinos más próximos) que respeta y preserva la definición del pixel art.
Los valores que puede tomar la propiedad son los siguientes:
Valor | Descripción | Soporte |
---|---|---|
auto | Por defecto, el navegador decide que algoritmo de escalado utilizar. | |
smooth | La imagen es escalada con algoritmos que priorizan la apariencia, ideal para fotos. | ❌ Poco soporte |
high-quality | Idéntico a smooth , pero con mejor calidad. Utilizar cuando la calidad se degrada. | ❌ Poco soporte |
crisp-edges | Enfocado en preservar contrastes y bordes de imagen. Ideal para lineas definidas y bocetos. | ✅ Buen soporte |
pixelated | Usa algoritmo de "vecinos más próximos", orientado a preservar pixel art bien definido. | ✅ Buen soporte |
Aquí puedes ver, por ejemplo, la diferencia de aplicar image-rendering
con los valores crisp-edges
y pixelated
respectivamente a una imagen orientada para representar un dibujo pixel art. Como se observa, el Manz pirata de la derecha tiene los bordes mucho más definidos que el Manz pirata de la izquierda, el cuál se ve más borroso:
No obstante, ten en cuenta que es una particularidad de pixel art. Con otras imágenes, normalmente el valor predeterminado es más que suficiente.
La propiedad image-orientation
La propiedad image-orientation
permite rotar una imagen respecto a la información que se encuentra en sus metadatos, o por el contrario, desactivarla y mostrarla tal cuál aparece en la propia imagen. Los valores que se pueden indicar son los siguientes, donde from-image es el valor por defecto:
Valor | Descripción |
---|---|
from-image | Usa la orientación de la imagen indicada en sus metadatos EXIF. |
none | No se usa ninguna rotación adicional. Se muestra tal cual. |
La propiedad aspect-ratio
La propiedad aspect-ratio
permite cambiar la proporción de aspecto entre los valores width
y height
de una imagen u objeto desde CSS. De esta forma, podemos asegurarnos de que las imágenes no se deformarán o tendrán una relación de aspecto no adecuada en nuestras páginas, sin necesidad de darle un tamaño concreto de ancho y alto al elemento.
Los valores de la propiedad aspect-ratio
son:
Valor | Descripción |
---|---|
auto | El navegador calcula automáticamente la proporción adecuada. |
Se utilizará la proporción width / height indicada. | |
auto | Utiliza la proporción indicada, salvo que tenga un tamaño definido. |
El valor de aspect-ratio también puede darse como un número decimal en lugar de a / b . |
Si no tienes claro como cambian los valores de un elemento, puedes usar esta calculadora:
Con esta propiedad, podemos mantener la relación de aspecto de un elemento de forma más cómoda.