Cargando...

Imágenes responsive CSS

Las media queries cambiaron el layout al variar el viewport. Las imágenes son otro punto de tensión: un archivo de 4000px en una columna estrecha desborda, gasta ancho de banda o hace saltar la página al cargar. Esta lección cubre CSS fluido, reservar espacio y fuentes más inteligentes — sin repetir la sintaxis @media de la sesión anterior.

Kit de imágenes responsive

📊 Imágenes responsive de un vistazo

Pieza Trabajo habitual
max-width: 100% + height: auto La imagen escala dentro de la columna; mantiene proporción
width / height en <img> o aspect-ratio en CSS Reserva espacio; menos CLS al cargar
srcset + sizes El navegador elige un archivo cercano al ancho renderizado
<picture> + <source media> Art direction — recorte o asset distinto por condición
object-fit + caja fija Recortar o letterbox en marco conocido (lección Object Fit)
Media queries en layout Siguen moviendo columnas y nav — la imagen sigue el ancho del slot

Dos capas: ancho de layout (contenedor, grid, media queries) y comportamiento de imagen (escala CSS + qué archivo descargar). Arregla el desbordamiento con CSS; añade srcset cuando el mismo visual necesite archivos más pequeños en móvil.

Imagen fluida — max-width y height: auto

El hábito clásico: que la imagen no supere su contenedor ni deforme la altura.

Imagen fluida en columna

css 
.article img {
max-width: 100%;
height: auto;
display: block;
}

Evita solo width: 100% en imágenes intrínsecas enormes sin max-width. Combina reglas fluidas con fuentes razonables o srcset para que el móvil no descargue JPEGs poster para un thumbnail.

Reservar espacio — dimensiones y aspect-ratio

Si el navegador conoce pronto ancho y alto, el contenido inferior no salta. En CSS moderno expresas la relación directamente.

Relación de aspecto en hero

css 
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}

Para fotos de contenido que deben verse enteras, prefiere max-width fluido sin forzar cover. aspect-ratio + object-fit: cover cuando el diseño exige marco fijo — Object Fit profundiza; aquí reduces salto de layout manteniendo responsive.

Cambio de resolución — srcset y sizes

srcset lista candidatos; sizes indica cuán ancha se renderiza la imagen en el layout (no solo el viewport). El navegador elige — no escribes @media por cada ancho de PNG.

Srcset con hint sizes

html 
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>

sizes honesto: ancho completo en móvil, mitad del contenedor en desktop si CSS lo hace. Hints falsos → archivos demasiado grandes o borrosos.

Art direction con <picture>

Cuando el recorte debe cambiar — hero vertical en móvil, banner ancho en desktop — anida <source> con media (o type) y un <img> fallback con alt.

Picture para recortes distintos

html 
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>

Usa picture para art direction, no para cincuenta breakpoints duplicados. A menudo basta srcset si solo cambia resolución. Combínalo con CSS fluido arriba.

Marcos fijos — recordatorio object-fit

Fotos fluidas inline: max-width. Tarjetas con altura igual: caja medida + object-fit: cover — Object Fit es dueño de eso; no estires toda la galería con fill.

Miniatura de tarjeta en grid responsive

css 
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}

Trabajar con media queries

Las queries siguen cambiando columnas y sidebar; las imágenes heredan el ancho del slot. Actualiza sizes cuando un breakpoint cambie el ancho renderizado. No reemplazas queries — alineas hints de imagen con el layout.

Pruébalo tú

  1. <img> ancho en columna estrecha; corrige con max-width: 100% y height: auto.
  2. Añade width, height o aspect-ratio en un hero y recarga.
  3. Un srcset con tres anchos y sizes realista.
  4. Un <picture> con dos recortes estrecho vs ancho.
  5. Thumb de altura fija con object-fit: cover en grid de tarjetas.

Errores comunes

  • Solo src enorme sin srcset
  • width: 100% sin height: auto y fotos deformadas
  • sizes="100vw" siempre cuando CSS renderiza 320px
  • object-fit sin caja limitada
  • Reenseñar sintaxis @media aquí en vez de unir slot y sizes

Resumen

  • CSS fluido (max-width: 100%, height: auto) mantiene imágenes en columnas responsive
  • Reserva espacio con dimensiones o aspect-ratio
  • srcset/sizes optimizan qué archivo; <picture> para art direction
  • object-fit para marcos fijos, no por defecto en cada foto inline
  • Siguiente: Breakpoints — planificar queries en toda la página

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 56 de 61
Css Tutorial