прокрутка переполнения не работает. Я не могу прокрутить свое изображение

Question

Итак, я работал над этой веб-страницей, и я столкнулся с странной проблемой, изображение должно быть в полном размере, и я хотел бы иметь возможность прокручивать по горизонтали, но он не работает, хотя я добавлено переполнение-x: прокрутка в моем css.

вот ссылка на сайт. http://des-iis.ucn.dk/mmdi0915/1055435/WebApp/map.html

Любые решения, спасибо заранее!

Answer 1

Привет, Я проверил свой код и здесь решение просто удалить поле: авто из тела, т.е. от вашего CSS так CSS, что тело будет выглядеть как этот

body { 
    font-family: Futura; 
    font-size: 2em; 
    color: white; 
    background: url(../img/BG_nowplaying.jpg); 
    background-size: cover; 
} 

Answer 2

Вы имеете проблема в том, что ваше изображение получает 100% от ширины или высоты тела из-за атрибута background-size: cover.

Атрибут background-size: cover не будет переполнять div, так как это фон, а не контент.

Итак, вместо того, чтобы делать это на 100% через CSS, вы должны попробовать javascript, чтобы правильно изменить размер прокрутки.

Может быть, вы должны попробовать решения, как это с JavaScript:

function fixSize(){ 
    //your image div 
    var imageDiv = document.getElementById("mapImage"); 

    //your actual image size, I got the values from the image on your example 
    var imgWidth = 1042; 
    var imgHeight = 667; 

    //the size of the body, it gets the current body width and height 
    var bgWidth = document.body.offsetWidth; 
    var bgHeight = document.body.offsetHeight; 

    //the percentage of the body size vs the image size 
    //this tells which size should be bigger than the body 
    var dimensionX = bgWidth/imgWidth; 
    var dimensionY = bgHeight/imgHeight; 

    if(dimensionX > dimensionY) //if the width is bigger than the height, fix height 
    { 
     imageDiv.style.height = (imgHeight * dimensionX); 
    }else{ //if the height is bigger than the width, fix width 
     imageDiv.style.width = (imgWidth * dimensionY); 
    } 
} 

Это должно работать нормально, вам просто нужно вызвать его при загрузке тела (OnLoad) и когда rezise тело (OnResize).

Возможно, вы можете использовать тег <img> вместо фона, его можно будет легче манипулировать переполнением.

Надеюсь, я помог вам.