Zeigen Sie ein großes Bild, das in ein kleineres Ansichtsfenster scrollen kann

Question

Ich muss ein großes Bild in ein kleineres div anzeigen und horizontal scrollen, um es anzuzeigen. Das äußere div sollte sich bis zur Viewport-Größe erstrecken (die je nach Gerät variieren kann), aber nicht mehr als diese.

ich auf diese Weise versucht haben:

#outer-div { 
 
     max-width:300px; //just a guess, but I need the exact viewport size here 
 
     overflow:auto; \t 
 
    } 
 
    
 
    img { 
 
     position: absolute; 
 
     left: 50%; 
 
     -webkit-transform: translateX(-50%); 
 
    }

<div id="outer-div"> 
 
     <img name="slideImg" src="https://socrates.dyndns-server.com/meteosurf/previsioni/0000.GIF" border=0>' 
 
    </div>

ohne Glück ... Dies ist JSFiddle.

Answer 1

Alles, was Sie tun müssen, ist die Größe des Bild-Container-Elements zu beschränken (ich nehme outer-div hier an) und dann den Überlauf dieses Containers festlegen.

Um die max-width auf die Darstellungsbreite festzulegen, verwenden: max-width:100vw;

$(function(){ 
 
    var imgWidth = document.querySelector("#outer-div img").width; 
 
    // Scroll the container 1/2 the width of the image 
 
    $("#outer-div").scrollLeft((imgWidth - $("#outer-div").width())/2); 
 
});

#outer-div { 
 
    max-width:100vw; /* No wider than 100% of the viewport width */ 
 
    overflow-X:scroll; /* show scroll bar for horizontal scrolling */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer-div"> 
 
    <img src="http://study.com/cimages/videopreview/types-of-weather-maps-imagesscreen_169365.png"> 
 
</div>