我目前有一个带有横向图像(下面代码中的 map 图像)的网站；一个简单的着陆页。该站点是响应式的，因此我目前将图像设为 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;
}
如您所见，我尝试在一些情况下使用溢出，但没有成功。基本上，我只希望高度填满浏览器窗口，但能够水平滚动以查看图像的其余部分。
提前致谢。
最佳答案
试试这个，
<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>
关于html - 在溢出图像上水平滚动 - HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24251562/