Question

我目前有一个网站，上面有横向图片（下面代码中的地图图片）;一个简单的登陆页面。该网站是响应式的，所以我目前的图像为height: 100%，因此它总是填满浏览器窗口。我设置width: auto所以它保持比例，但图像落在屏幕上。试图做overflow:scroll并没有做任何事情，而且我无法横向滚动，使我的图像被切断。这是我的标记和样式（在Sass中）：

<div class="container">
    <img id="map" src="rvagetsit_map_edit.png" alt="RVA Gets I.T."/>
<div class="logo">
    <img id="logo" src="rvagetsitlogo.png" alt="RVA Gets I.T."/>
</div>

body {
min-height: 100%;
position: fixed;
overflow: scroll;
.container {
    height: 100%;
    overflow-x: auto;
    #map {
        position: fixed;
        width: auto;
        height: 100%;
        display: block;
        overflow: scroll;

    }

正如您所看到的，我尝试在几个实例中使用溢出但它没有用。基本上，我只想让高度填满浏览器窗口，但能够水平滚动以查看图像的其余部分。

提前致谢。

Answer 1

试试这个，

<style type="text/css">
.container {
height: 100%;
overflow-x: scroll;    
white-space: nowrap;
width: 100%;
}
#map {
height: 100%;
vertical-align: top;
}
</style>
<body>
<div class="container">
    <img id="map" src="rvagetsit_map_edit.png" alt="RVA Gets I.T."/>
</body>

Answer 2

试试这个

HTML

<div class="slideshow">
   <div class="images">
       A slideshow of images in here (whatever you want to say for screen readers)
   </div>
</div>

CSS

.slideshow {
  position: relative;
  overflow: hidden;
}
.images {
  background: url(slideshow.jpg);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: slideshow 10s linear infinite;
  -moz-animation:    slideshow 10s linear infinite;
}
@-webkit-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
@moz-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}

https://css-tricks.com/infinite-all-css-scrolling-slideshow/ enter link description here

溢出图像上的水平滚动 - HTML / CSS

2 个答案: