title: Automatically resize images with browser size using CSS
body: <p>I want all (or just some) of my images getting resized automatically when I resize my browser window.
  I've found the following code - it doesn't do anything though.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
          &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="icons"&gt;
              &lt;div id="contact"&gt;
                  &lt;img src="img/icon_contact.png" alt="" /&gt;
              &lt;/div&gt;
              &lt;img src="img/icon_links.png" alt="" /&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      font-family: Arial;
      font-size: 11px;
      color: #ffffff;
      background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
      background-size: cover;
  }
  
  #icons {
      position: absolute;
      bottom: 22%;
      right: 8%;
      width: 400px;
      height: 80px;
      z-index: 8;
      transform: rotate(-57deg); 
      -ms-transform: rotate(-57deg); 
      -webkit-transform: rotate(-57deg); 
      -moz-transform: rotate(-57deg);
  }
  
  #contact { 
      float: left; 
      cursor: pointer; 
  }
  
  
  img { 
      max-width: 100%; 
      height: auto; 
  }
  </code></pre>
  
  <p>How can I basically have a fullscreen design (with <code>background-size: cover</code>) and have <code>div</code> elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like <code>cover</code> is doing for the background)?</p>