<h1>Scaling a <code>&lt;div&gt;</code> to Match an SVG Background Image Aspect Ratio</h1>
<figure>
  <figcaption>CSS background image, wrapper set to 100px wide</figcaption>
  <div style="width:100px">
    <div class="bg-svg">
  </div>
</figure>
<figure>
  <figcaption>CSS background image, wrapper set to 50% wide</figcaption>
  <div style="width: 50%">
    <div class="bg-svg">
  </div>
</figure>
<figure>
  <figcaption>CSS background image, full width</figcaption>
  <div>
    <div class="bg-svg">
  </div>
</figure>

.bg-svg {
  width: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg);
  background-size: cover;
  height: 0;
  padding: 0; /* reset */
  padding-bottom: 92%;
  border: thin dotted darkgrey;
}
figure > div {
  margin: 1em auto;
}