Del curso: Diseño web responsive: Imágenes

Accede al curso completo hoy mismo

Únete hoy para acceder a más de 24.100 cursos impartidos por expertos del sector.

Introducción al elemento picture

Introducción al elemento picture

Del curso: Diseño web responsive: Imágenes

Comenzar mi mes de prueba gratis Comprar para mi equipo

Introducción al elemento picture

“

Hasta ahora, hemos visto como modificar el uso del etiquetado IMG para poder crear imágenes responsive añadiendo srcset y sizes. Pero recordemos, que a la hora de trabajar con imágenes responsive, también tenemos un nuevo elemento para poder emplear. Me refiero al elemento Picture. El elemento Picture es un contenedor que envuelve un etiquetado de imagen. Aquí empezamos con el etiquetado contenedor. Míralo durante unos segundos y verás que no te resulta tan extraño. Por un lado, tenemos un etiquetado IMG donde tenemos el src correspondiente, la fuente, la etiqueta alt como texto alternativo, y también tenemos incluido el parámetro opcional de srcset por si queremos incluirlo. En este caso he añadido el escriptor 2x para apuntar a la densidad de píxeles de la pantalla del dispositivo. La principal diferencia aquí, son estos source srcset, que nos van a permitir añadir "Media Queries" en casos concretos. Recuerda que con srcset estábamos dejando en cierto modo que el navegador fuera el…

Contenido