title: CSS unable to force image width and height
body: <p>I'm trying to display a panoramic image with a specific size and a hidden overflow to eventually enable user-induced panning (the code is not included below).</p>
  
  <p>I'm adding the image this way:</p>
  
  <pre><code>&lt;div class="pan"&gt;
  &lt;img src="http://lorempixel.com/image_output/sports-q-c-1920-480-7.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am setting the image size parameters this way:</p>
  
  <pre><code>.pan {
    width: 800px;
    height: 400px;
    overflow: hidden;
    border: red solid;
  }
  </code></pre>
  
  <p>However, when I change the width, the height changes proportionally, and I don't have any overflow to hide. The image is 13632 × 2936.</p>
  
  <p>This is the result I get from the code above:</p>
  
  <p><a href="https://i.stack.imgur.com/koy6t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/koy6t.png" alt="enter image description here"></a></p>
  
  <p>When setting the size this way, I get the image below:</p>
  
  <pre><code>.pan {
    width: 400px;
    height: 400px;
    overflow: hidden;
    border: red solid;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tbI71.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tbI71.png" alt="enter image description here"></a></p>
  
  <p>Trying to override img parameters set to 100% (for other purposes), I get a distorted image--still no hidden overflow:</p>
  
  <pre><code>.pan img {
    height: 800px;
    width: 400px;
    transition: opacity .6s linear .8s;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OAvoS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OAvoS.png" alt="enter image description here"></a></p>
  
  <p>Other code related to .pan and a container (from tutorial cited below) :</p>
  
  <pre><code>.pan img{
    transition: opacity .6s linear .8s;
  }
  
  .pan img.loaded{ opacity: 1; }
  
  .img-pan-container, .img-pan-container img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  
  .img-pan-container{
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    height: 100%;
    width: 100%;
  }
  
  .img-pan-container img{
    -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
    position: absolute;
    top: 0;
    left: 0;
  }
  </code></pre>
  
  <p><em>For info</em>, I am trying to implement this <a href="http://manos.malihu.gr/jquery-image-panning/" rel="nofollow noreferrer">example</a>. However, I am not currently focusing my question on the rest of the panning code, as I am having issues just getting the image sized correctly with the hidden overflow.</p>