Imágenes y objetos
En ocasiones, nos interesa poder adaptar ciertos objetos como imágenes, vídeos u otros a nuestra web (inputs, textarea pero no iframe, etc.). Para ello, vamos a ver ciertas propiedades CSS que nos permiten modificar estos elementos y adaptarlos al estilo que deseamos.
object-fit
Esta propiedad nos permite controlar cómo el contenido de un elemento reemplazado, como una imagen (<img>) o un video (<video>), se ajusta a las dimensiones de su contenedor (definidas por su width y height).
Resuelve el problema común de qué hacer cuando las dimensiones de tu imagen o video no coinciden con las dimensiones del espacio que le has asignado: ¿debería estirarse, deformarse, recortarse o dejar espacios vacíos?
Los valores que puede tomar esta propiedad son:
- fill (valor por defecto): El contenido se estira o encoge para llenar completamente el contenedor, sin importar si se deforma. Es decir, La imagen o video ocupará todo el espacio, pero probablemente perderá su proporción original (se verá estirada o aplastada).
- contain: El contenido se escala para ajustarse dentro del contenedor manteniendo su proporción original. Se verá la imagen o video completo sin deformarse, pero podrían quedar espacios vacíos si la proporción no coincide con la del contenedor.
- cover: El contenido se escala para cubrir completamente el contenedor manteniendo su proporción original. El contenedor quedará totalmente relleno sin deformar la imagen, pero alguna parte del contenido podría quedar recortada si las proporciones no coinciden. Es muy usado para imágenes de fondo o "hero images".
- none: El contenido no se redimensiona. La imagen o video mantendrá su tamaño original. Si es más grande que el contenedor, se recortará; si es más pequeño, quedará centrado con espacio vacío alrededor.
- scale-down: El navegador compara los resultados de none y contain y elige el que muestre la imagen más pequeña. En la práctica, evita que una imagen pequeña se agrande (como haría contain) y asegura que una imagen grande se reduzca para caber (también como contain).
body {
font-family: sans-serif;
text-align: center;
background-color: #f0f0f0;
}
.contenedor-demo {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
.caja-imagen {
border: 3px solid #333;
border-radius: 8px;
padding: 10px;
background-color: #fff;
img.demo {
/* 1. Forzamos un tamaño cuadrado */
width: 200px;
height: 200px;
/* 2. Añadimos un fondo para ver el "espacio sobrante" */
background-color: #ddd;
border: 2px dashed #ff0000;
/* 3. Aplicamos los valores de object-fit */
&#img-contain {
object-fit: contain;
/* Encaja la imagen DENTRO del contenedor */
}
&#img-cover {
object-fit: cover;
/* CUBRE todo el contenedor */
}
}
}
}A menudo object-fit irá junto con la propiedad object-position.
object-position
Esta propiedad te permite controlar qué parte de la imagen o video debe permanecer visible cuando object-fit (especialmente cover o contain) provoca un recorte o deja espacios. Es decir, define el "punto de enfoque" de una imagen o video dentro de su contenedor.
Es la compañera inseparable de object-fit. Si object-fit decide cómo se ajusta la imagen (ej. cover), object-position decide qué parte de la imagen debe priorizar y mantener visible.
¿Cómo funciona?
Piensa en object-position como si estuvieras moviendo la imagen detrás de un marco (el contenedor). El marco no se mueve, solo la foto que está detrás.
Su valor por defecto es 50% 50%, lo que significa que la imagen siempre estará perfectamente centrada (horizontal y verticalmente).
Sólo notarás su efecto cuando la imagen se recorta (como con object-fit: cover) o cuando deja espacio vacío (como con object-fit: contain).
La propiedad object-position acepta dos valores, que representan los ejes X (horizontal) e Y (vertical).
- Puedes darle el valor mediante top/center/right/bottom. Ejemplo: object-position: top center; (Prioriza la parte superior central de la imagen).
- %, porcentajes. Ejemplo: object-position: 50% 25%; (Centrado horizontalmente, y enfocado en el primer cuarto superior vertical).
- px o rem. Ejemplo: object-position: -10px 0; (Mueve la imagen 10px hacia la izquierda).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo de Object-Position</title>
<link rel="stylesheet" href="2.object-position.css">
</head>
<body>
<h1>Demo de <code>object-position</code></h1>
<p>Forzando una imagen panorámica (ancha) en un contenedor vertical (alto).</p>
<div class="demo-container">
<div class="card">
<h3><code>object-position: left;</code></h3>
<img id="img-izquierda" class="img-demo" src="https://picsum.photos/id/1015/800/300"
alt="Enfoque a la izquierda">
</div>
<div class="card">
<h3><code>object-position: center;</code></h3>
<img id="img-centro" class="img-demo" src="https://picsum.photos/id/1015/800/300"
alt="Enfoque al centro (default)">
</div>
<div class="card">
<h3><code>object-position: right;</code></h3>
<img id="img-derecha" class="img-demo" src="https://picsum.photos/id/1015/800/300"
alt="Enfoque a la derecha">
</div>
</div>
</body>
</html>image-rendering
Esta propiedad es una "sugerencia" que le das al navegador sobre qué algoritmo debe usar al escalar una imagen (es decir, al hacerla más grande o más pequeña que su tamaño original).
Su principal utilidad es controlar si una imagen debe verse suave y difuminada (ideal para fotos) o nítida y en bloques (ideal para pixel art) cuando se redimensiona.
¿Por qué es necesaria?
Cuando estiras una imagen pequeña, el navegador tiene que "inventar" los píxeles que faltan. Tiene dos formas principales de hacerlo:
- Suavizado (Interpolación Bilineal): Es el modo por defecto (auto). El navegador mira los píxeles cercanos y crea píxeles nuevos con colores intermedios. Esto crea un efecto suave y difuminado, que funciona muy bien para fotografías.
- Por Aproximación (Nearest Neighbor): El navegador simplemente toma el píxel más cercano y lo replica. Esto mantiene los bordes duros y crea un aspecto de "bloques" o pixelado.
El problema es que el modo por defecto (auto) arruina las imágenes tipo pixel art, ya que las vuelve borrosas. Ahí es donde entra image-rendering.
¿Qué valores podemos usar?
- auto (valor por defecto): El navegador elige, casi siempre aplica un suavizado (interpolación bilineal). Es ideal para fotografías y la mayoría de imágenes.
- pixelated: Le dice al navegador que use el algoritmo de "vecino más cercano" (nearest neighbor). La imagen se verá nítida y en bloques cuando se agranda. Ideal para: Ideal para: Pixel art, sprites de juegos, códigos QR.
- crisp-edges: Es similar a pixelated, pero el estándar lo define como un algoritmo que preserve el contraste y los bordes, sin añadir desenfoque. Su objetivo es mantener la nitidez. En la práctica, muchos navegadores lo tratan de forma muy similar a pixelated. Es una opción más moderna.
<!DOCTYPE html>
<html>
<head>
<title>Demo Image-Rendering</title>
<link rel="stylesheet" href="3.image-rendering.css">
</head>
<body>
<h1><code>auto</code> vs <code>pixelated</code> vs <code>crisp-edges</code></h1>
<p>Escalando una imagen de 16x16 a 160x160.</p>
<div class="container">
<div class="card">
<h3><code>auto</code> (Default)</h3>
<img id="img-auto" src="https://img.icons8.com/fluency-systems-filled/16/pixel-heart.png"
alt="Corazón borroso">
</div>
<div class="card">
<h3><code>pixelated</code></h3>
<img id="img-pixelated" src="https://img.icons8.com/fluency-systems-filled/16/pixel-heart.png"
alt="Corazón nítido pixelado">
</div>
<div class="card">
<h3><code>crisp-edges</code></h3>
<img id="img-crisp" src="https://img.icons8.com/fluency-systems-filled/16/pixel-heart.png"
alt="Corazón nítido bordes definidos">
</div>
</div>
</body>
</html>aspect-ratio
Con aspect-ratio podemos cambiar la proporción de aspecto entre el ancho y alto de una imagen u objeto con CSS, pudiéndonos asegurar que no se deformarán o tendrán un aspecto raro.
¿Cómo funciona?
La magia de aspect-ratio es que el navegador calcula automáticamente la dimensión que falta.
- Si defines el width: El navegador calculará el height para mantener la proporción.
- Si defines el height: El navegador calculará el width para mantener la proporción.
¿Cómo se le da valor a esta propiedad?
- auto: el navegador calcula la proporción que considera adecuada
- width /height: Se utiliza la porporción ancho/alto indicado
- auto width / height: utiliza la proporción indicada, salvo que tenga un tamaño definido
- número: Número decimal en lugar de poner ancho y alto
Ejemplo:
- aspect-ratio: 1 / 1; (Un cuadrado perfecto).
- aspect-ratio: 16 / 9; (Un video panorámico).
- aspect-ratio: 4 / 3; (Una foto clásica).
- aspect-ratio: 9 / 16; (Un formato vertical, como un story).
Nota: Si defines explícitamente un width y un height que entran en conflicto con el aspect-ratio, ganarán el width y el height (la propiedad aspect-ratio será ignorada).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo de Image-Rendering</title>
<link rel="stylesheet" href="4.aspect-ratio.css">
</head>
<body>
<h1>Demo de <code>aspect-ratio</code></h1>
<div class="gallery">
<div class="card">
<h3><code>aspect-ratio: 1 / 1;</code> (Cuadrada)</h3>
<div class="box" id="box-cuadrada">
<img src="https://picsum.photos/id/1043/800/600" alt="Caja cuadrada">
</div>
</div>
<div class="card">
<h3><code>aspect-ratio: 16 / 9;</code> (Panorámica)</h3>
<div class="box" id="box-panoramica">
<img src="https://picsum.photos/id/1043/800/600" alt="Caja panorámica">
</div>
</div>
</div>
</body>
</html>aspect-ratio es perfecto para galerías de imágenes, placeholders de carga, y especialmente para iframes de video.