title: Show a large image that can scroll into a smaller viewport
body: <p>I need to show a large image into a smaller div, enabling scrolling horizontally to view it. The outer div should extend up to the viewport size (which can be variable, depending on devices), but not more than it.</p>
  
  <p>I have tried this way:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #outer-div {
          max-width:300px;  //just a guess, but I need the exact viewport size here
          overflow:auto; 
      }
      
      img {
         position: absolute;
         left: 50%;
         -webkit-transform:  translateX(-50%);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="outer-div"&gt;
          &lt;img name="slideImg" src="https://socrates.dyndns-server.com/meteosurf/previsioni/0000.GIF"  border=0&gt;'
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>with no luck...
  This is the <a href="https://jsfiddle.net/kxu5913c/" rel="nofollow noreferrer">JSFiddle</a>.</p>