Responsive Image Test

by Jayson Buquia

HTML

<picture>
  <source srcset="https://cdn.bulbagarden.net/upload/thumb/a/ae/003Venusaur.png/1200px-003Venusaur.png"
        media="(min-width:800px)">
  <source srcset="https://img.pokemondb.net/artwork/large/ivysaur.jpg"
        media="(min-width:500px)">
  <source srcset="https://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" >
  <img src="https://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" alt="">
</picture>

<!-- <div class="srcset">
  <img srcset="https://cdn.bulbagarden.net/upload/thumb/7/7e/006Charizard.png/1200px-006Charizard.png,
             https://img.pokemondb.net/artwork/large/charmeleon.jpg,
             https://cdn.bulbagarden.net/upload/7/73/004Charmander.png"
     sizes="800px,
             (min-width: 480px) 440px,
            (min-width: 320px) 280px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
</div> -->

SCSS

body {
  width: 600px;
  height: 500px;
}

picture,
.srcset {
  display: block;
  width: 250px;
  height: 150px;
}

img {
  display: block;
  width: 100%;
}