gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:21:31 24 4
gpt4 key购买 nike

我目前有一个带有横向图像(下面代码中的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com