小さなビューポートにスクロールできる大きな画像を表示

Question

大きな画像を小さなdivに表示し、水平方向にスクロールして表示する必要があります。外側のdivは、ビューポートのサイズ（デバイスに応じて変わる可能性があります）まで拡張する必要がありますが、それより大きくはありません。私はこの方法を試してみました

：運と

#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>

... これはJSFiddleです。

Answer 1

イメージコンテナ要素（ここではouter-divと仮定します）のサイズを制限し、そのコンテナのオーバーフローを設定するだけです。あなたもここにあなたのHTMLが含まれている必要があり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>