title: Div/Picture doesn't resize properly on zoom
body: <p>I have left and right arrows defined by an image inside a div. All my div heights and widths are defined in percentages. When I zoom in or out of the site (using Chrome) all the elements behave as I would expect them to except these left and right arrows (i.e. the div the image is in) which don't seem to scale the same as everything else.</p>
  
  <p>I've created a <a href="http://jsfiddle.net/TN2L4/" rel="nofollow">JFiddle</a> to show what I mean. When you zoom out I would expect the arrow image to get smaller but this doesn't seem to happen.</p>
  
  <p>Below is the relevant HTML</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;div class="container"&gt;
  
  &lt;div class="leftSideBar"&gt;
  
      &lt;div class="miniLogo"&gt;
          &lt;img src="icons/miniLogo.png" height="140" width="140" alt="Logo" /&gt;
      &lt;/div&gt;
  
      &lt;div id="mainMenu" class="navMenu"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li class="splashNav"&gt;&lt;a id="a1" href="Welcome.php"&gt;WELCOME&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
                  &lt;li class="splashNav"&gt;&lt;a id="a2" href="Portfolio.php"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
                  &lt;li class="splashNav"&gt;&lt;a id="a3" href="Contact.php"&gt;CONTACT&lt;/a&gt;&lt;/li&gt; &lt;br /&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div id="projectMenu" &gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li class="projectNav"&gt;&lt;a class="projectLink" href="?project=im licab"&gt;IM LICAB&lt;/a&gt;&lt;/li&gt;&lt;li class="projectNav"&gt;&lt;a class="projectLink" href="?project=project2"&gt;PROJECT2&lt;/a&gt;&lt;/li&gt;&lt;li class="projectNav"&gt;&lt;a class="projectLink" href="?project=project3"&gt;PROJECT3&lt;/a&gt;&lt;/li&gt;                &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
      &lt;div class="navArrow"&gt;
          &lt;img src="icons/Click Left.png" alt="Left Arrow" class="hoverOver" onclick="nextPic('L')" /&gt;
      &lt;/div&gt;
      &lt;div class="coverPic"&gt;
      &lt;img class="projectCoverPic" src="projects/im licab/IMALICKABLEGUY1.jpg" alt="Project Cover Picture" /&gt;     &lt;/div&gt;
      &lt;div class="navArrow"&gt;
          &lt;img src="icons/Click Right.png" alt="Right Arrow" class="hoverOver" onclick="nextPic('R')" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="rightSideBar"&gt;
      &lt;div class="projectDesc"&gt;&lt;p&gt;Description&lt;/p&gt;
  
  &lt;p&gt;Paragraph1&lt;/p&gt;
  
  &lt;p&gt;Paragraph2&lt;/p&gt;
  
  &lt;p&gt;Paragraph3&lt;/p&gt;
  &lt;/div&gt;  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>html, body {
  margin:0; padding:0;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  background-color: white;
  }
  
  body {
  font-family: Helvetica, sans-serif;
  }
  
  
  h1 {
  text-align:center;
  }
  
  a:link{
  text-decoration: none;
  }
  
  img {
  max-width: 100%;
  }
  
  .hoverOver:hover {
  cursor: pointer;
  cursor: hand;
  }
  
  .container {
  width:90%; 
  height: 95%;
  min-height: 95%;
  max-height: 95%;
  margin: auto;
  padding: 0;
  }
  
  .leftSideBar {
  width: 14%;
  min-height: 100%;
  max-height: 100%;
  float: left;
  margin: 0;
  padding: 0;
  
  }
  
  .rightSideBar {
  width: 20%;
  min-height: 100%;
  max-height: 100%;
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 8%;
  }
  
  .navMenu {
  width: 100%;
  height: 30%;
  }
  
  .main {
  margin-top: 10%;
  margin-right: 4%;
  margin-left: 4%;
  padding: 0;
  height: 70%;
  min-height: 70%;
  max-height: 70%;
  width: 56%;
  float: left;
  }
  
  .splashNav {
  list-style-type: none;
  }
  
  #a1{
  color: #9B9B9B;
  }
  
  #a2{
  color: #AFAFAF;
  }
  
  #a3{
  color: #BFBFBF;
  }
  
  #a1:hover{
  text-decoration: none;
  color: #737373;
  }
  
  #a1:active{
  text-decoration: none;
  color: #737373;
  }
  
  #a2:hover{
  text-decoration: none;
  color: #737373;
  }
  
  #a2:active{
  text-decoration: none;
  color: #737373;
  }
  
  #a3:hover{
  text-decoration: none;
  color: #737373;
  }
  
  #a3:active{
  text-decoration: none;
  color: #737373;
  }
  
  #logo {
  display: block;
  margin: auto;
      transform-origin: top left; /* IE 10+, Firefox, etc. */
      -webkit-transform-origin: top left; /* Chrome */
      -ms-transform-origin: top left; /* IE 9 */
  }
  
  #welcomeMenu{
  margin-top: 100%;
  }
  
  #contactPhoto{
  display: block;
  margin: auto;
  }
  
  #mainMenu {
  margin-top: 10%;
  }
  
  .miniLogo {
  margin-top: 40%;
  margin-left: 5%;
  }
  
  .projectNav {
  list-style-type: none;
  }
  
  .projectLink {
  color: black;
  font-size: 70%;
  margin-left: 15%;
  }
  
  .projectDesc {
  float: right;
  font-size: 85%;
  margin-top: 55%;
  }
  
  .coverPic {
  margin: auto;
  margin-top: -6.5%;
  float: left;
  max-width: 88%;
  padding-left: 3%;
  padding-right: 3%;
  }
  
  .projectCoverPic {
  max-width: 100%;
  }
  
  .navArrow {
  float: left;
  margin: auto;
  margin-top: -5.5%;
  max-width: 2.5%;
  height: 100%;
  }
  </code></pre>