• Cuarzo.dev
  • Posts
  • El elemento PICTURE de HTML explicado!! (cómo poner Imágenes)

El elemento PICTURE de HTML explicado!! (cómo poner Imágenes)

Author

Kiko Palomares
March 23, 2021 • Lo lees en: 2 minutes

Curso de HTML desde cero [completo]

Este curso integral te guía a través de cada paso para convertirte en un maestro de HTML, empezando absolutamente desde cero. Ideal para principiantes que desean hacer una marca en el mundo digital.

newsletter.cuarzo.dev/p/curso-html-desde-cero

Elemento Picture

Nos permite mostrar diferentes imágenes para diferentes dispositivos o tamaños de pantalla.

<picture>

HTML5 introdujo el elemento <picture>

Este elemento contiene elementos <source> y cada uno de estos hace referencia a una imagen diferente. Y el navegador escoge una de ellas según la pantalla o el dispositivo.

En los atributos del source se describe cuando se tiene que usar cada imagen.

Es importante poner un <img> como último hijo, por si el navegador no soporta el <picture> o no encuentra el source adecuado, entonces carga el <img>

En ejemplo de abajo si redimensionas la ventana del navegador verás como va cambiando de una imagen a otra.

Suscríbete para seguir leyendo...

Este contenido es gratuito, pero debes estar suscrito a Cuarzo.dev para continuar leyendo.

Already a subscriber?Sign In.Not now

Reply

or to participate.