水平滾動溢出圖像 - HTML/CSS

我目前有一個網站與橫向導向的圖像（在下面的代碼中的地圖圖像）上;一個簡單的登陸頁面。該網站將作出響應，所以我目前的圖像爲height: 100%，因此它總是填滿瀏覽器窗口。我設置了width: auto，以保持比例，但圖像落在了屏幕上。試圖做一個overflow:scroll不會做任何事情，我無法水平滾動，使我的形象切斷。這裏是我的標記和樣式（在薩斯）：水平滾動溢出圖像 - HTML/CSS

<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; 

    }

正如你所看到的，我試過在少數情況下使用溢出，但沒有奏效。基本上，我只想讓高度填充瀏覽器窗口，但能夠水平滾動以查看圖像的其餘部分。

在此先感謝。

來源

2014-06-16 la1ch3

讓你的css語法先排序。記得關閉大括號'body {}'[link]（http://www.w3schools.com/css/css_syntax.asp） – Dafmeister

試試這個，

<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>

來源

2014-06-16 20:40:00

嘗試這個

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

來源

2015-07-21 11:36:08

水平滾動溢出圖像 - HTML/CSS

回答

相關問題