responsive-placeholder/hardcoded-placeholder.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Hardcoded Placeholder</title>
    <style media="screen">
      .container {
        max-width: 100%;
        width: 1000px;
      }
      .image-container {
        /* reset script*/
        margin: 0;
        /* hardcoded placeholder, not responsive */
        width: 360px;
        /* Try to use (max-)width: 100% to make it responsive */
        max-width: 100%;
        /* height: auto, 100% does not works when image is not loaded */
        height: 360px;

        background-color: #ddd;
      }
      .image {
        display: block;
        max-width: 100%;
        width: 100%;
        height: auto;
      }
      .button {
        display: inline-block;
        padding: 6px 12px;
        margin: 0;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        border-radius: 4px;
        background: hsl(120, 40%, 45%);
        color: #fff;
      }
      .button:hover {
        background: hsl(120, 40%, 55%);
      }
    </style>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {
        var image = document.querySelector(".image");
        setTimeout(function() {
          image.src = "https://github.com/code4hk/showmethecode/raw/master/logo.png";
        }, 5000);
      });
    </script>
  </head>
  <body>
    <main class="container">
      <!-- Set the src later to pretend loading -->
      <figure class="image-container">
        <img class="image" alt="Code for Hong Kong">
      </figure>
      <!-- The UX is bad, because the image push away the button after loaded -->
      <a href="#" class="button">I am a Button</a>
    </main>
  </body>
</html>