html picture tag

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
 <div class="container">

   <picture>
     <source srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/320px-Kittyply_edit1.jpg" media="(max-width: 640px)">
     <source srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/640px-Kittyply_edit1.jpg" media="(max-width: 1024px)">
     <source srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/1024px-Kittyply_edit1.jpg" media="(max-width: 1280px)">
     <source srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/1280px-Kittyply_edit1.jpg" media="(max-width: 2560px)">
     <img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Kittyply_edit1.jpg" alt="Plya the cat">
   </picture>
   <!-- https://via.placeholder.com/1280x720 -->
 </div>

CSS

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;


  /* Transition test */
  -webkit-transition: all 100ms ease;
  -moz-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
}