CSS
Tutorial CSS: Imágenes responsive
Aprende a crear imágenes responsive con CSS usando max-width, object-fit, srcset y aspect-ratio para diseños adaptativos y sin saltos de layout.
Aprende CSS y certifícateImágenes fluidas con max-width: 100% y height: auto
Las imágenes son elementos fundamentales en el diseño web moderno, pero pueden causar problemas de visualización cuando trabajamos con diseños responsive. Una imagen con dimensiones fijas puede romper fácilmente el layout en pantallas pequeñas, creando barras de desplazamiento horizontal indeseadas o desbordando sus contenedores.
La técnica de imágenes fluidas es la solución más básica y efectiva para adaptar imágenes a diferentes tamaños de pantalla. Esta aproximación permite que las imágenes se redimensionen automáticamente para ajustarse al ancho de su contenedor, manteniendo su proporción original.
Implementación básica
Para crear imágenes fluidas, necesitamos aplicar dos propiedades CSS clave:
img {
max-width: 100%;
height: auto;
}
Estas dos líneas de código son la base del comportamiento responsive para imágenes. Veamos qué hace cada propiedad:
max-width: 100%: Establece que la imagen nunca será más ancha que su contenedor. La imagen se reducirá si es necesario, pero nunca se expandirá más allá de su tamaño original o del ancho de su contenedor.
height: auto: Mantiene la proporción original de la imagen (aspect ratio) mientras el ancho cambia. Esto evita que las imágenes se distorsionen cuando se redimensionan.
Ejemplo práctico
Imaginemos que tenemos una imagen de 800×600 píxeles dentro de un artículo que tiene un ancho máximo de 600px:
<article class="content">
<img src="landscape.jpg" alt="Beautiful landscape">
<p>This is a beautiful landscape photograph taken at sunset.</p>
</article>
.content {
max-width: 600px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
Con estas reglas CSS, la imagen se mostrará a 600px de ancho (el ancho de su contenedor) en pantallas grandes. Cuando la pantalla se reduzca a menos de 600px, la imagen se reducirá proporcionalmente para ajustarse al ancho disponible.
Aplicación a diferentes tipos de imágenes
Esta técnica funciona con todos los formatos de imagen comunes:
/* Aplicar a todos los tipos de imágenes */
img, svg, video, canvas {
max-width: 100%;
height: auto;
}
Consideraciones importantes
Hay algunos aspectos a tener en cuenta cuando trabajamos con imágenes fluidas:
Tamaño de descarga: Aunque la imagen se muestre más pequeña en dispositivos móviles, el navegador descargará el archivo completo. Esto puede afectar al rendimiento en conexiones lentas.
Espacio reservado: Las imágenes fluidas pueden causar saltos en el layout mientras se cargan, ya que el navegador no conoce las dimensiones finales hasta que la imagen está completamente descargada.
Imágenes en línea: Para imágenes en línea (dentro de texto), puede ser preferible usar valores específicos:
/* Para imágenes en línea */
.inline-image {
max-width: 100%;
height: auto;
vertical-align: middle; /* Mejora la alineación con el texto */
}
Solución para imágenes de fondo
Las imágenes de fondo también pueden hacerse fluidas usando background-size
:
.hero-banner {
background-image: url('banner.jpg');
background-size: 100% auto; /* Ancho completo, altura proporcional */
/* Alternativa: background-size: cover; */
background-position: center;
background-repeat: no-repeat;
}
Ejemplo avanzado con contenedores
A veces necesitamos más control sobre cómo se comportan las imágenes en diferentes contextos:
/* Imágenes en tarjetas de producto */
.product-card img {
max-width: 100%;
height: auto;
display: block; /* Elimina el espacio inferior que aparece con imágenes inline */
margin: 0 auto; /* Centra la imagen si es más pequeña que el contenedor */
}
/* Imágenes en galerías */
.gallery img {
max-width: 100%;
height: auto;
transition: transform 0.3s ease; /* Suaviza el cambio de tamaño */
}
.gallery img:hover {
transform: scale(1.05); /* Pequeño efecto de zoom al pasar el ratón */
}
Compatibilidad con navegadores
La técnica de imágenes fluidas con max-width: 100%
y height: auto
es compatible con todos los navegadores modernos, incluyendo versiones antiguas. No requiere prefijos de proveedor ni soluciones alternativas especiales.
Esta aproximación simple pero efectiva es la base del manejo de imágenes en diseños responsive. En las siguientes secciones, exploraremos técnicas más avanzadas como object-fit
para un control más preciso sobre el recorte y la proporción, así como srcset
para optimizar la carga de imágenes según la resolución del dispositivo.
Control de tamaño y proporción con object-fit y object-position
Aunque las imágenes fluidas con max-width: 100%
y height: auto
son una excelente base para el diseño responsive, a veces necesitamos un control más preciso sobre cómo se ajustan las imágenes dentro de sus contenedores. Aquí es donde entran en juego las propiedades object-fit
y object-position
.
Estas propiedades nos permiten controlar cómo una imagen (u otro contenido reemplazado como video) debe redimensionarse para adaptarse a su contenedor, similar a cómo funcionan las propiedades background-size
y background-position
para imágenes de fondo.
La propiedad object-fit
La propiedad object-fit
define cómo una imagen debe redimensionarse para adaptarse a su contenedor. Es especialmente útil cuando queremos mantener dimensiones específicas en nuestros contenedores de imágenes.
img {
width: 300px;
height: 200px;
object-fit: cover;
}
Los valores principales de object-fit
son:
fill: El valor predeterminado. La imagen se estira para llenar completamente el contenedor, lo que puede distorsionar la proporción original.
contain: La imagen se escala para caber completamente dentro del contenedor manteniendo su proporción. Puede dejar espacios en blanco si la proporción de la imagen difiere de la del contenedor.
cover: La imagen cubre completamente el contenedor manteniendo su proporción. Algunas partes de la imagen pueden quedar recortadas si las proporciones no coinciden.
none: La imagen no se redimensiona en absoluto y se muestra en su tamaño original.
scale-down: Muestra la imagen con el menor tamaño entre
none
ycontain
.
Ejemplo visual de object-fit
Veamos un ejemplo práctico con diferentes valores de object-fit
:
<div class="gallery">
<figure>
<img src="landscape.jpg" alt="Landscape" class="img-fill">
<figcaption>object-fit: fill</figcaption>
</figure>
<figure>
<img src="landscape.jpg" alt="Landscape" class="img-contain">
<figcaption>object-fit: contain</figcaption>
</figure>
<figure>
<img src="landscape.jpg" alt="Landscape" class="img-cover">
<figcaption>object-fit: cover</figcaption>
</figure>
<figure>
<img src="landscape.jpg" alt="Landscape" class="img-none">
<figcaption>object-fit: none</figcaption>
</figure>
</div>
.gallery figure {
width: 200px;
height: 200px;
border: 1px solid #ddd;
margin: 10px;
display: inline-block;
}
.gallery img {
width: 100%;
height: 100%;
}
.img-fill {
object-fit: fill;
}
.img-contain {
object-fit: contain;
}
.img-cover {
object-fit: cover;
}
.img-none {
object-fit: none;
}
La propiedad object-position
Mientras que object-fit
controla cómo se redimensiona la imagen, object-position
determina cómo se posiciona dentro de su contenedor. Esta propiedad funciona de manera similar a background-position
.
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center top; /* Centra horizontalmente y alinea con la parte superior */
}
La propiedad object-position
acepta:
- Palabras clave:
top
,right
,bottom
,left
,center
- Porcentajes:
25% 75%
(25% desde la izquierda, 75% desde arriba) - Unidades de longitud:
10px 20px
(10px desde la izquierda, 20px desde arriba)
Ejemplo práctico de object-position
Veamos cómo object-position
afecta a una imagen con object-fit: cover
:
<div class="portrait-gallery">
<figure>
<img src="portrait.jpg" alt="Portrait" class="pos-center">
<figcaption>center (default)</figcaption>
</figure>
<figure>
<img src="portrait.jpg" alt="Portrait" class="pos-top">
<figcaption>top</figcaption>
</figure>
<figure>
<img src="portrait.jpg" alt="Portrait" class="pos-bottom-right">
<figcaption>bottom right</figcaption>
</figure>
</div>
.portrait-gallery figure {
width: 150px;
height: 200px;
border: 1px solid #ddd;
margin: 10px;
display: inline-block;
}
.portrait-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pos-center {
object-position: center; /* Valor predeterminado */
}
.pos-top {
object-position: top;
}
.pos-bottom-right {
object-position: right bottom;
}
Casos de uso comunes
Tarjetas de producto uniformes
.product-card {
width: 250px;
height: 350px;
border-radius: 8px;
overflow: hidden;
}
.product-card .image-container {
width: 100%;
height: 200px;
}
.product-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
}
.product-card:hover img {
transform: scale(1.1);
}
Galería de retratos centrados en la cara
.portrait {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
}
.portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%; /* Ligeramente por encima del centro para enfocar rostros */
}
Banners de encabezado
.hero-banner {
width: 100%;
height: 40vh;
position: relative;
}
.hero-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom; /* Enfoca la parte inferior de la imagen */
}
.hero-text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
Combinación con media queries
Podemos cambiar el comportamiento de object-fit
y object-position
según el tamaño de la pantalla:
.featured-image {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
}
@media (max-width: 768px) {
.featured-image {
height: 200px;
object-position: top; /* En móviles, enfoca la parte superior */
}
}
@media (max-width: 480px) {
.featured-image {
height: 150px;
}
}
Compatibilidad con navegadores
Las propiedades object-fit
y object-position
son compatibles con todos los navegadores modernos. Sin embargo, Internet Explorer no las soporta. Si necesitas compatibilidad con IE, puedes usar polyfills o alternativas basadas en background-image
.
/* Alternativa para navegadores antiguos */
.fallback-container {
width: 300px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
Consideraciones de rendimiento
Aunque object-fit
y object-position
son herramientas poderosas, es importante recordar que:
- Las imágenes siguen descargándose en su tamaño original
- El navegador debe realizar cálculos adicionales para el redimensionamiento
- Para imágenes muy grandes, considera usar también
srcset
para optimizar la carga
Estas propiedades nos dan un control preciso sobre cómo se muestran las imágenes en diseños responsive, permitiéndonos crear interfaces más pulidas y profesionales sin depender de recortes manuales para cada tamaño de pantalla.
Densidad de píxeles y srcset para diferentes resoluciones
En el mundo actual de dispositivos con pantallas de alta resolución, las imágenes responsive no solo deben adaptarse al tamaño de la pantalla, sino también a su densidad de píxeles. Un iPhone, un monitor 4K o una tablet moderna tienen densidades de píxeles mucho mayores que las pantallas tradicionales, lo que significa que pueden mostrar imágenes con mayor detalle.
Entendiendo la densidad de píxeles
La densidad de píxeles (o pixel ratio) se refiere a cuántos píxeles físicos de la pantalla se utilizan para representar un píxel lógico en CSS. Por ejemplo:
- Una pantalla estándar tiene una relación 1:1 (1 píxel físico = 1 píxel CSS)
- Una pantalla Retina de Apple tiene una relación 2:1 (2 píxeles físicos = 1 píxel CSS)
- Algunos dispositivos de gama alta pueden tener relaciones de 3:1 o incluso 4:1
Cuando mostramos una imagen de 300×200 píxeles en una pantalla con densidad 2x, en realidad ocupa 600×400 píxeles físicos, lo que puede hacer que la imagen se vea borrosa si no proporcionamos una versión de mayor resolución.
El atributo srcset
El atributo srcset
nos permite proporcionar diferentes versiones de una imagen según la densidad de píxeles del dispositivo. El navegador elegirá automáticamente la más adecuada.
<img src="image-1x.jpg"
srcset="image-1x.jpg 1x,
image-2x.jpg 2x,
image-3x.jpg 3x"
alt="Imagen responsive">
En este ejemplo:
src="image-1x.jpg"
es la imagen por defecto (para navegadores que no soportan srcset)srcset
define tres versiones de la misma imagen con diferentes resoluciones- Los sufijos
1x
,2x
y3x
indican la densidad de píxeles para la que está optimizada cada imagen
Ejemplo práctico con srcset
Imaginemos que tenemos un logotipo que queremos mostrar nítidamente en todos los dispositivos:
<img src="logo.png"
srcset="logo.png 1x,
logo@2x.png 2x,
logo@3x.png 3x"
alt="Logo de la empresa"
width="200">
En este caso:
logo.png
es una imagen de 200×100 píxeles (1x)logo@2x.png
es una imagen de 400×200 píxeles (2x)logo@3x.png
es una imagen de 600×300 píxeles (3x)
El atributo width="200"
es importante porque le dice al navegador que la imagen debe ocupar 200 píxeles CSS, independientemente de qué versión se cargue.
Combinando srcset con tamaños de pantalla
El atributo srcset
también puede utilizarse junto con el atributo sizes
para proporcionar diferentes imágenes según el ancho de la ventana del navegador:
<img src="photo-small.jpg"
srcset="photo-small.jpg 400w,
photo-medium.jpg 800w,
photo-large.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Fotografía responsive">
En este ejemplo:
- Los sufijos
400w
,800w
y1200w
indican el ancho en píxeles de cada imagen - El atributo
sizes
define cuánto espacio ocupará la imagen en diferentes escenarios: - En pantallas menores a 600px, ocupará el 100% del ancho de la ventana
- En pantallas entre 600px y 1200px, ocupará el 50% del ancho
- En pantallas mayores a 1200px, ocupará el 33% del ancho
Diferencia entre descriptores w y x
Es importante entender la diferencia entre los dos tipos de descriptores en srcset
:
- Descriptor x (1x, 2x, 3x): Se refiere a la densidad de píxeles del dispositivo
- Descriptor w (400w, 800w): Se refiere al ancho en píxeles de la imagen
<!-- Usando descriptores de densidad (x) -->
<img src="photo.jpg"
srcset="photo.jpg 1x,
photo@2x.jpg 2x"
alt="Foto con descriptores de densidad">
<!-- Usando descriptores de ancho (w) con sizes -->
<img src="photo-small.jpg"
srcset="photo-small.jpg 400w,
photo-large.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Foto con descriptores de ancho">
Ejemplo avanzado para una galería de fotos
<div class="gallery">
<figure>
<img src="thumbnail.jpg"
srcset="thumbnail.jpg 400w,
medium.jpg 800w,
large.jpg 1600w"
sizes="(max-width: 480px) 100vw,
(max-width: 900px) 50vw,
33vw"
alt="Imagen de galería">
<figcaption>Descripción de la imagen</figcaption>
</figure>
<!-- Más imágenes... -->
</div>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery figure {
margin: 0;
flex-grow: 1;
}
.gallery img {
max-width: 100%;
height: auto;
display: block;
}
@media (max-width: 480px) {
.gallery figure {
width: 100%;
}
}
@media (min-width: 481px) and (max-width: 900px) {
.gallery figure {
width: calc(50% - 5px);
}
}
@media (min-width: 901px) {
.gallery figure {
width: calc(33.333% - 7px);
}
}
Optimización de imágenes para diferentes densidades
Para crear versiones de imágenes optimizadas para diferentes densidades de píxeles:
- Crea la imagen en la resolución más alta que quieras soportar (por ejemplo, 3x)
- Redimensiona hacia abajo para crear versiones 2x y 1x
- Optimiza cada versión para reducir el tamaño del archivo
- Nombra las imágenes de forma consistente (por ejemplo, usando sufijos como
@2x
)
Consideraciones de rendimiento
- Tamaño de archivo: Las imágenes de alta resolución pueden ser significativamente más grandes. Asegúrate de optimizarlas adecuadamente.
- Formato de imagen: Considera usar formatos modernos como WebP que ofrecen mejor compresión.
- Lazy loading: Combina
srcset
con lazy loading para mejorar el rendimiento:
<img src="placeholder.jpg"
srcset="small.jpg 400w,
medium.jpg 800w,
large.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
loading="lazy"
alt="Imagen con carga diferida">
Compatibilidad con navegadores
El soporte para srcset
es excelente en navegadores modernos. Para navegadores antiguos, siempre tendremos la imagen definida en el atributo src
como fallback.
<!-- Navegadores antiguos usarán esta imagen -->
<img src="fallback.jpg"
srcset="modern-small.jpg 400w,
modern-large.jpg 800w"
sizes="100vw"
alt="Imagen con fallback">
Uso con picture para mayor control
Para un control aún más preciso, podemos combinar srcset
con el elemento picture
:
<picture>
<!-- Para pantallas pequeñas, imagen recortada -->
<source media="(max-width: 600px)"
srcset="mobile.jpg 1x,
mobile@2x.jpg 2x">
<!-- Para pantallas medianas -->
<source media="(max-width: 1200px)"
srcset="tablet.jpg 1x,
tablet@2x.jpg 2x">
<!-- Imagen por defecto para pantallas grandes -->
<img src="desktop.jpg"
srcset="desktop.jpg 1x,
desktop@2x.jpg 2x"
alt="Imagen adaptativa">
</picture>
Esta técnica nos permite no solo proporcionar diferentes resoluciones, sino también diferentes recortes o versiones de la imagen según el tamaño de la pantalla.
Implementar correctamente srcset
mejora significativamente la experiencia del usuario en dispositivos de alta resolución, a la vez que optimiza el rendimiento al cargar imágenes más pequeñas en dispositivos con pantallas de menor resolución o tamaño.
Attribute aspect-ratio para evitar saltos de layout
Uno de los problemas más comunes al trabajar con imágenes en diseños responsive es el fenómeno conocido como "layout shift" o salto de maquetación. Esto ocurre cuando una imagen se está cargando y el navegador aún no conoce sus dimensiones, provocando que el contenido se reorganice abruptamente una vez que la imagen aparece completamente.
La propiedad aspect-ratio
de CSS nos permite definir la proporción de un elemento antes de que su contenido se cargue, evitando estos molestos saltos visuales y mejorando significativamente la experiencia del usuario.
¿Qué es aspect-ratio?
La propiedad aspect-ratio
establece una relación proporcional entre el ancho y el alto de un elemento, permitiendo que uno de estos valores se calcule automáticamente a partir del otro. Su sintaxis es simple:
.element {
aspect-ratio: width / height;
}
Por ejemplo, para mantener una proporción 16:9 (común en videos):
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
Evitando saltos de layout con imágenes
Cuando cargamos imágenes en una página web, el navegador inicialmente no reserva espacio para ellas hasta conocer sus dimensiones. Esto causa que el contenido "salte" cuando la imagen finalmente se carga, afectando métricas importantes como el Cumulative Layout Shift (CLS) que Google utiliza para evaluar la experiencia de usuario.
Veamos cómo solucionar este problema:
.image-container {
width: 100%;
aspect-ratio: 4 / 3; /* Proporción 4:3 */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
}
<div class="image-container">
<img src="landscape.jpg" alt="Beautiful landscape">
</div>
Con este enfoque, el navegador reserva inmediatamente el espacio correcto para la imagen basándose en la proporción definida, incluso antes de que la imagen se cargue.
Proporciones comunes en diseño web
Algunas proporciones frecuentemente utilizadas en diseño web:
- 1 / 1: Proporción cuadrada (ideal para avatares o miniaturas)
- 16 / 9: Formato panorámico (videos, banners)
- 4 / 3: Formato tradicional (fotografías estándar)
- 3 / 2: Proporción clásica en fotografía
- 21 / 9: Ultra panorámico (banners de página completa)
Combinación con media queries
Podemos cambiar la proporción según el tamaño de pantalla:
.hero-banner {
width: 100%;
aspect-ratio: 21 / 9; /* Muy panorámico en pantallas grandes */
}
@media (max-width: 768px) {
.hero-banner {
aspect-ratio: 16 / 9; /* Menos panorámico en tablets */
}
}
@media (max-width: 480px) {
.hero-banner {
aspect-ratio: 4 / 3; /* Casi cuadrado en móviles */
}
}
Aplicación en galerías de imágenes
Las galerías de imágenes son un caso de uso perfecto para aspect-ratio
:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.gallery-item {
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: 8px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.05);
}
<div class="gallery">
<div class="gallery-item">
<img src="image1.jpg" alt="Gallery image 1">
</div>
<div class="gallery-item">
<img src="image2.jpg" alt="Gallery image 2">
</div>
<!-- Más imágenes... -->
</div>
Este código crea una galería responsive donde todas las imágenes mantienen la misma proporción, independientemente de su contenido original.
Tarjetas de producto con aspect-ratio
Otro caso de uso común es en tarjetas de producto:
.product-card {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
.product-image {
aspect-ratio: 1 / 1; /* Imágenes cuadradas */
background-color: #f5f5f5; /* Color de fondo mientras carga */
}
.product-image img {
width: 100%;
height: 100%;
object-fit: contain; /* Muestra el producto completo */
}
.product-info {
padding: 16px;
}
<div class="product-card">
<div class="product-image">
<img src="product.jpg" alt="Product name">
</div>
<div class="product-info">
<h3>Product Name</h3>
<p>$99.99</p>
</div>
</div>
Compatibilidad con navegadores antiguos
La propiedad aspect-ratio
es relativamente nueva, pero podemos crear un fallback para navegadores que no la soportan usando la técnica del "padding-trick":
.image-container {
width: 100%;
aspect-ratio: 16 / 9; /* Navegadores modernos */
}
/* Fallback para navegadores que no soportan aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
.image-container {
position: relative;
padding-top: 56.25%; /* 9/16 = 0.5625 = 56.25% */
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
El truco del padding funciona porque el padding-top en porcentaje se calcula en relación al ancho del elemento, no a su altura.
Uso con elementos iframe (videos)
Los videos incrustados son otro caso donde aspect-ratio
resulta muy útil:
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/video-id" allowfullscreen></iframe>
</div>
Mejorando el rendimiento con width y height en HTML
Una práctica recomendada es combinar aspect-ratio
en CSS con los atributos width
y height
en HTML:
<img src="image.jpg" width="800" height="600" alt="Description">
img {
max-width: 100%;
height: auto;
aspect-ratio: attr(width) / attr(height);
}
Los navegadores modernos utilizan estos atributos para calcular automáticamente la proporción y reservar el espacio adecuado, incluso antes de aplicar los estilos CSS.
Consideraciones de rendimiento
- Mejora del CLS (Cumulative Layout Shift): Usar
aspect-ratio
mejora significativamente esta métrica de Core Web Vitals. - Carga progresiva: Combina con técnicas de carga progresiva para una mejor experiencia:
.lazy-image {
aspect-ratio: 16 / 9;
background-color: #f0f0f0; /* Color de fondo mientras carga */
}
<div class="lazy-image">
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">
</div>
Ejemplo completo de página de blog
.blog-post {
max-width: 800px;
margin: 0 auto;
}
.featured-image {
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
}
.featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content-images {
aspect-ratio: 3 / 2;
margin: 20px 0;
border-radius: 4px;
overflow: hidden;
}
.content-images img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 600px) {
.featured-image {
aspect-ratio: 4 / 3; /* Menos panorámico en móviles */
}
}
La propiedad aspect-ratio
es una herramienta fundamental para crear diseños web estables y profesionales. Al reservar el espacio correcto para las imágenes antes de que se carguen, evitamos los molestos saltos de layout que deterioran la experiencia del usuario y afectan negativamente al posicionamiento SEO. Combinada con otras técnicas responsive como object-fit
y srcset
, nos permite crear interfaces fluidas y consistentes en todos los dispositivos.
Ejercicios de esta lección Imágenes responsive
Evalúa tus conocimientos de esta lección Imágenes responsive con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender cómo hacer imágenes fluidas usando max-width y height para adaptarlas a diferentes tamaños de pantalla.
- Aprender a controlar el tamaño y la posición de las imágenes con las propiedades CSS object-fit y object-position.
- Entender el uso del atributo srcset para optimizar la carga de imágenes según la densidad de píxeles y tamaño de pantalla.
- Aplicar la propiedad aspect-ratio para reservar espacio y evitar saltos de layout durante la carga de imágenes.
- Conocer consideraciones de rendimiento y compatibilidad para implementar imágenes responsive efectivas.