<h1>Scaling a JPEG Image</h1>
<figure>
  <figcaption>Original Size (100x50) </figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/rainbow-potofgold.jpeg">
  </div>
</figure>
<figure>
  <figcaption>2x Scale (200x100)</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/rainbow-potofgold.jpeg" width="200" height="100">
  </div>
</figure>
<figure>
  <figcaption>Stretch to a Different Aspect Ratio (300x50)</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/rainbow-potofgold.jpeg" width="200" height="50">
  </div>
</figure>
<figure>
  <figcaption>Squish to a Different Aspect Ratio (50x50)</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/rainbow-potofgold.jpeg" width="50" height="50">
  </div>
</figure>
<figure>
  <figcaption>Auto scale to height=100</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/rainbow-potofgold.jpeg" height="100">
  </div>
</figure>
<figure>
  <figcaption>Auto scale to width=100% of container</figcaption>
  <div>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/rainbow-potofgold.jpeg" width="100%">
  </div>
</figure>

/* common styles for all examples */
body {
    margin: 1em;
    font-family: sans-serif;
    background-color: #fffff8;
}
h1 {
    font-size: 150%;
}
figure {
    display: block;
    background: #cdf;
    width: 90%;
    max-width: 50em;
    box-sizing: border-box;
    margin: 1em auto;
    padding: 0.5em 1em;
    border: solid thin navy;
}
figure:nth-of-type(2n) {
    background: #bfc;
}
figcaption, figure > div {
    display: block;
    vertical-align: middle;
}
figure > div {
    text-align: center;
}
img, svg, .bg-svg {
    border: thin dotted darkgrey;
}
svg.defs-only {
    display:block; position: absolute; 
    height:0; width:0; margin: 0; padding: 0; 
    border: none; overflow: hidden;
}