在溢出的图像上水平滚动-HTML / CSS
[英]Horizontal scrolling on overflowing image - HTML/CSS
问题描述
I currently have a site with a landscape-oriented image (the map image in the code below) on it; 
我目前有一个站点，上面有一个横向图像（下面代码中的地图图像）； a simple landing page. 一个简单的目标网页。 The site is to be responsive, so I currently have the image as height: 100% so that it always fills up the browser window. 该站点是响应性的，因此我目前将图像的height: 100%以便始终填充浏览器窗口。 I set the width: auto so it keeps proportions, but the image falls of the screen. 我设置了width: auto以便保持比例，但是图像落在屏幕上。 Trying to do a overflow:scroll doesn't do anything, and I'm unable to scroll horizontally, making my image cut off. 尝试执行overflow:scroll不会执行任何操作，并且我无法水平滚动，从而导致图像被切断。 Here's my markup and styles (in Sass): 这是我的标记和样式（在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;
}
As you can see, I tried to use overflow in a few instances but it didn't work. 如您所见，我尝试在少数情况下使用溢出，但没有成功。 Basically, I just want the height to fill the browser window, but be able to scroll horizontally to see the rest of the image. 基本上，我只希望高度填充浏览器窗口，但能够水平滚动以查看其余图像。
Thanks in advance. 提前致谢。
2 个解决方案
解决方案1
0 2014-06-16 20:40:00
Try this, 尝试这个，
<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
0 2015-07-21 11:36:08
Try This 尝试这个
HTML HTML
<div class="slideshow">
<div class="images">
A slideshow of images in here (whatever you want to say for screen readers)
</div>
</div>
CSS 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 https://css-tricks.com/infinite-all-css-scrolling-slideshow/ 在此处输入链接说明
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.