Página personal de Pedro Gregorio

Último Código

Me ha parecido muy interesante la etiqueta <picture>. Esta nueva etiqueta de HTML5 permite incorporar varias imágenes con diferentes medidas en un mismo hueco o caja, para que se visualice la que mejor se adapte a la resolución o al tamaño de la pantalla del cliente final cuando accede a nuestra web.

No es sólo que podamos incluir imágenes con diferente resolución, sino que podremos poner imágenes diferentes para que se vea un aspecto diferente de página según quien lo vea o el dispositivo desde el que se vea.

Simplemente se deben incorporar dentro de <picture> la etiqueta <source> con las diferentes imágenes.

Ejemplo de Código

Código de ejemplo del uso de la etiqueta <picture>:

    <picture>
        < source media="(min-width:1100px)" srcset="imagen1.jpg">
        < source media="(min-width:1000px)" srcset="imagen2.jpg">
        < source media="(min-width:800px)" srcset="imagen3.jpg">
        < source media="(min-width:600px)" srcset="imagen4.jpg">
        < source media="(min-width:400px)" srcset="imagen5.jpg">
        <img src="imagen.jpg">
    </picture>
            

Los Simpson

Homer Simpson

Siempre me han gustado los dibujos de los Simpson. Aunque los veo más para adultos que para niños.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos

Vacio

Vacio