Горизонтальная прокрутка на переполненном изображении - HTML / CSS

#html #css #image #scroll

#HTML #css #изображение #прокрутка

Вопрос:

В настоящее время у меня есть сайт с ландшафтно-ориентированным изображением (изображение карты в приведенном ниже коде); простая целевая страница. Сайт должен быть отзывчивым, поэтому в настоящее время у меня есть изображение, height: 100% чтобы оно всегда заполняло окно браузера. Я установил width: auto так, чтобы он сохранял пропорции, но изображение исчезало с экрана. Попытка сделать a 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;

    }

Как вы можете видеть, я пытался использовать overflow в нескольких случаях, но это не сработало. По сути, я просто хочу, чтобы высота заполняла окно браузера, но могла прокручиваться по горизонтали, чтобы увидеть остальную часть изображения.

Заранее спасибо.

Ответ №1:

Попробуйте это,

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

Попробуйте это

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/введите описание ссылки здесь