MOOC Módulo 2 Ejercicio Opcional 3

Motivación a cargo de Victor Küppers en Tedx Andorra

Código empleado en el <body>:

<iframe 
width="560" 
height="315" 
src="https://www.youtube.com/embed/nWecIwtN2ho?ecver=1" 
frameborder="0" 
allowfullscreen>
</iframe>

Imágenes Responsive con etiqueta "picture"

shaum

Código empleado:

<picture>
<source media="(min-width: 1100px)" srcset="/images/shaum6.jpg">
<source media="(min-width: 1000px)" srcset="/images/shaum5.jpg">
<source media="(min-width: 800px)" srcset="/images/shaum4.jpg">
<source media="(min-width: 600px)" srcset="/images/shaum3.jpg">
<source media="(min-width: 400px)" srcset="/images/shaum2.jpg">
<source media="(min-width: 300px)" srcset="/images/shaum1.jpg">
<img src="/images/shaum1.jpg" alt="shaum">
</picture>

Imágen SVG vectorial

Código e imágen empleada:

<img src="images/boxy-svg.svg" width=100% height=750px>


Podemos ver como al cambiar el tamaño del navegador la imagen se adapta sin perdida de calidad.
La imágen utilizada es el logo de Boxy SVG Editor.