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

【问题标题】：Horizontal scrolling on overflowing image - HTML/CSS溢出图像上的水平滚动 - HTML/CSS
【发布时间】：2015-07-21 19:36:08
【问题描述】：

我目前有一个带有横向图像（下面代码中的地图图像）的站点；一个简单的登陆页面。该站点是响应式的，因此我目前将图像设置为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;

    }

如您所见，我尝试在少数情况下使用溢出，但没有成功。基本上，我只希望高度填充浏览器窗口，但能够水平滚动以查看图像的其余部分。

提前致谢。

【问题讨论】：

首先对您的 css 语法进行排序。记得关闭你的大括号body{}link

标签： html css image scroll

【解决方案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>

【讨论】：

【解决方案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

【讨论】：