Défilement horizontal sur l'image débordante - HTML/CSS

J'ai actuellement un site avec une image orientée paysage (l'image de la carte dans le code ci-dessous) dessus; une page d'atterrissage simple. Le site doit être réactif, donc j'ai actuellement l'image comme height: 100% de sorte qu'il remplit toujours la fenêtre du navigateur. J'ai mis le width: auto de sorte qu'il garde des proportions, mais l'image tombe de l'écran. Essayer de faire un overflow:scroll ne fait rien, et je suis incapable de faire défiler horizontalement, ce qui rend mon image coupée. Voici mon balisage et styles (Sass):Défilement horizontal sur l'image débordante - 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; 

    }

Comme vous pouvez le voir, j'ai essayé d'utiliser débordement dans quelques cas, mais cela n'a pas fonctionné. Fondamentalement, je veux juste la hauteur pour remplir la fenêtre du navigateur, mais être capable de faire défiler horizontalement pour voir le reste de l'image.

Merci d'avance.

Source

2014-06-16 la1ch3

Commencez par trier votre syntaxe css. n'oubliez pas de fermer vos accolades 'body {}' [link] (http://www.w3schools.com/css/css_syntax.asp) – Dafmeister

Essayez ceci,

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

Source

2014-06-16 20:40:00

Essayez cette

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

Source

2015-07-21 11:36:08

Défilement horizontal sur l'image débordante - HTML/CSS

Répondre

Questions connexes