Question

所以，我一直在这个网页上工作，我遇到了奇怪的问题，Image应该是全尺寸的，我希望有可能水平滚动，但它不起作用，即使我添加了overflow-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

由于background-size: cover属性，您的图像会占据正文宽度或高度的100％。

background-size: cover属性不会溢出div，因为它是背景而不是内容。

因此，您应该尝试使用javascript来正确制作滚动大小，而不是通过CSS 100％实现。

也许你应该尝试使用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）和身体重新加载（onresize）时调用它。

也许您可以使用<img>标记而不是背景，操作溢出可能更容易。

我希望我能帮到你。

溢出滚动不起作用。我无法滚动浏览图片

2 个答案: