溢出隐藏没有在100％宽度和高度的容器上工作

我想获取一个图像来填满视口和自动调整大小，当浏览器被调整大小，这是工作，唯一的问题是，由于某种原因，我可以不会让图像不能扩展到#wrapper元素之外，即使它的溢出设置为隐藏，我假设这是因为我使用的是百分比而不是固定的宽度和高度？溢出隐藏没有在100％宽度和高度的容器上工作

现在，当我将overflow: hidden;放在它的正文元素上时，但是当您在页面上的任何位置选择文本并向下拖动时，它会向下滚动到图像的底部，这是有问题的，因为我有一个页脚菜单被绝对定位在屏幕的底部，随着图像被拖拽而随着图像向上移动，并且破坏整个效果。

所以基本上我只想拥有一个自动调整大小的背景，它不会溢出视口并导致滚动条，并且允许您的定位内容保持原有位置，并且在您向下拖动所选文本时不会向上滚动。

HTML：

<html> 
    <head> 
     <title>project</title> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="content"> 
       <img src="image.jpg" width="1400" height="1200" /> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
} 

#content { 
    width: 100%; 
    height: 100%; 
} 

#wrapper img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

来源

2011-09-18 Odyss3us

好，我知道它的工作，我改变了这个

#wrapper img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

这个

#wrapper img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

所以你可以看到，所有我改变是position财产，从absolute到fixed，并诀窍。 :)

来源

2011-09-19 12:38:22 Odyss3us

使用CSS背景而不是HTML的img元素。您可以使用background-size来调整图像大小。

来源

2011-09-18 13:35:40 Gerben

谢谢，会给它一个去！ – Odyss3us

唯一的问题是'background-size'似乎不是跨浏览器兼容的。 – Odyss3us

我知道这是一个旧的帖子，但为了他人的利益，因为位置：固定不是最兼容的方式，更改#wrapper元素有位置：relative;解决了这个问题。

谢谢，斯科特

来源

2012-09-25 12:03:52 scott

溢出隐藏没有在100％宽度和高度的容器上工作

回答

相关问题