Question

我需要将一个大图像显示为一个较小的div，可以水平滚动查看它。外部div应该扩展到视口大小（可以是可变的，具体取决于设备），但不能超过它。

我试过这种方式：

＆＃13;

    #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%);
    }

＆＃13;

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

＆＃13;

没有运气...... 这是JSFiddle。

Answer 1

您需要做的就是约束图像容器元素的大小（我假设outer-div这里），然后设置容器的溢出。

要将max-width设置为视口宽度，请使用：max-width:100vw;

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

显示可以滚动到较小视口的大图像

1 个答案: