Imagen arriba
Una composición apilada mantiene la imagen antes del texto en cualquier ancho del contenedor.
Multimedia, compuesta una sola vez
Todos los ejemplos de esta página usan el mismo renderizador semántico, el mismo catálogo y la misma política de entrega adaptable. Cambia el tamaño, abre la galería o desactiva JavaScript; el contenido permanece completo.
Siete resultados, un componente compartido
La disposición, la proporción, el ajuste y la posición lógica cambian el resultado sin crear componentes separados.
Imagen de producto contenida
El ajuste contenido conserva la silueta completa del producto mientras las versiones adaptables mantienen eficiente la entrega del PNG transparente.
Imagen antes
La composición dividida solo pasa a horizontal cuando su propio contenedor tiene espacio suficiente.
Imagen después
El texto conserva el primer lugar de lectura y la imagen aparece después, tanto visualmente como en el documento.
Retrato editorial
El perfil vertical selecciona una política de imagen más estrecha y un recorte deliberadamente alto.
Superposición legible
El texto se coloca sobre la imagen mediante una superficie oscura controlada y una receta de contraste legible.
Destacado a todo el ancho
La tarjeta destacada ocupa la cuadrícula disponible sin cambiar las ranuras compartidas de imagen y contenido.
Tell the business story with people and place
Use these layouts for an about page, a service story, a venue introduction, a case study, or a campaign feature. Content keeps meaningful source order while the framework owns balanced spacing, edges, overlap, and responsive reflow.
A real image-backed section
The photograph is discoverable in initial HTML, the scrim resolves through a known dark surface, and the content remains readable without JavaScript.
Editorial split
Media and copy share a balanced two-column composition when the section container is wide enough, then return to a single readable flow.
Full-bleed image, contained story
The image reaches the section edges while the supporting story returns to the site measure and page gutters.
Edge-to-edge split
The storefront meets the viewport edge while the copy retains comfortable, design-owned padding.
Controlled overlap
The content panel overlaps the photograph only at spacious container widths and returns to normal flow when room is limited.
Editorial offset
An asymmetrical portrait and start-aligned caption create editorial rhythm without authored grid coordinates.
Movimiento que sabe apartarse
Cada tratamiento es opcional, usa propiedades de composición y está completo antes de cualquier mejora. El movimiento reducido y los navegadores sin soporte conservan el mismo contenido estático.
Aparición contenida
Una línea temporal de vista introduce la tarjeta completa. La maquetación y el orden de lectura nunca esperan a la animación.
Zoom consciente del cursor
La imagen aumenta dentro de su marco recortado solo en dispositivos que declaran un cursor preciso.
Zoom consciente del cursor
Paralaje sutil
Solo la capa multimedia recorre unos pocos puntos porcentuales mediante CSS; el texto de la tarjeta permanece quieto.
Primero el póster, después la reproducción
El mismo clip local silencioso demuestra un fondo decorativo y un vídeo informativo nativo sin incorporar la reproducción a la ruta de renderizado inicial.
Horno ambiental y controlado
El póster JPEG aparece de inmediato. JavaScript incorpora el MP4 silencioso solo cuando se permite movimiento y un botón real permite detenerlo.
Controles nativos y contexto completo
El vídeo informativo no se reproduce automáticamente. Conserva controles nativos, dimensiones, descripciones temporizadas, póster y texto equivalente.
El vídeo no está disponible. Use la transcripción visual siguiente.
Transcripción visual
De cero a cuatro segundos, varios panes planos reposan junto a las brasas de un horno de leña. De cuatro a ocho segundos, la mano enguantada de un panadero gira un pan redondo cerca del calor.
Figura semántica y crédito del catálogo
Cuando un pie o un crédito pertenece a una imagen, el renderizador genera figure y figcaption reales. El crédito procede del catálogo multimedia y no de texto duplicado.
Galerías que funcionan primero como contenido estático
Todos los elementos aparecen en su orden original. El desplazamiento con ajuste y el visor dialog añaden comodidad sin ocultar contenido detrás de JavaScript.
Desplazamiento ajustado con visor
Desliza, arrastra, usa el panel táctil o la barra de desplazamiento horizontal para recorrer una fila que sigue siendo desplazable en todos los anchos. La capacidad declarada controla cuántas figuras se ven a la vez. Activa cualquier imagen para abrir el visor accesible.
Cuadrícula estática de retratos
Esta galería omite por completo el visor. Todas las figuras y sus pies siguen disponibles sin comportamiento del cliente.
Mixed-size mosaic
A wide lead photograph opens into varied portraits, details, people, and process images that keep meaningful source order without exposing grid coordinates.
Creado para cargar rápido
La página demuestra tanto la política de entrega como los resultados visuales. Lighthouse verifica el resultado desplegado después de cada implementación.
-
Fuentes del tamaño correcto
Los perfiles generan anchuras limitadas e indicaciones sizes precisas en lugar de enviar una única imagen sobredimensionada.
-
Carga intencionada
Solo la primera imagen es inmediata y de alta prioridad. Las demás se cargan de forma diferida y se decodifican de manera asíncrona.
-
Mejora pequeña
La galería entrega primero HTML completo. Un script aislado mejora los enlaces con dialog nativo, teclado y devolución del foco.
Need the complete implementation matrix?
The technical appendix isolates every public media variant, resolved decision, fallback, and actionable invalid state from this business-oriented showcase.