responsive image

by uto usui

HTML

<script src="https://fonts.googleapis.com/css?family=Dancing+Script:400,700"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<h1 class="h1">responsive image</h1>

<div class="wrap">
	<div class="inner">
    <h2>srcset x <br>ー</h2>
    <p>Display multiple alternative images with different pixel densities. <br> The browser can decide from the pixel density and choose an image suitable for the user's device.</p>
    <figure class="figure">
      <img class="img" src="http://dummyimage.com/500x500/88ccff/686a82.gif&text=image+1x" srcset="
        https://dummyimage.com/500x500/88ccff/686a82.gif&text=1x 1x, 
        https://dummyimage.com/1000x1000/88ccff/686a82.gif&text=2x 2x, 
        https://dummyimage.com/2000x2000/88ccff/686a82.gif&text=3x 3x">
    </figure>
    <h2>srcset w <br>ー</h2>
    <p>Selection to display images by size.</p>
    <figure class="figure">
      <img class="img" src="http://dummyimage.com/500x500/88ccff/686a82.gif&text=image+1x" srcset="
        https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w 610w, 
        https://dummyimage.com/1000x1000/88ccff/686a82.gif&text=980w 980w, 
        https://dummyimage.com/2000x2000/88ccff/686a82.gif&text=1200w 1200w">
    </figure>
    <h2>srcset <br>ー</h2>
    <p>Display images by screen resolution and screen size.</p>
    <figure class="figure">
      <picture>
        <source class="img" media="(max-width: 610px)" srcset="
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w+1x 1x,
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w+2x 2x, 
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w+3x 3x
        ">
        <source class="img" media="(max-width: 980px)" srcset="
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=980w+1x 1x,
         ...

SCSS

body {
	width: 100%;
  min-height: 100vh;
	padding-bottom: 150px;
  background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%);
  font-feature-settings: "pwid";
}

.h1 {
  margin: 1.4em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding-left: 1em;
  padding-right: 1em;
	min-width: 300px;
  max-width: 500px;
  text-align: justify;
}

.figure {
}

.img {
  max-width: 100%;
  height: auto;
  opacity: .75;
}

JavaScript

// webfont loading
 ///////////////////////////////

WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();