gpt4 book ai didi

css - 大图像导致浏览器滚动

转载 作者:太空宇宙 更新时间:2023-11-04 04:54:10 25 4
gpt4 key购买 nike

我在页面上使用大图片时遇到问题,我似乎无法避免它在某些浏览器上导致滚动。到目前为止,我只能在 Safari 上看到它,但我的 friend 显然也能在 Chrome 上看到它。

我所做的就是将图像绝对定位在其容器内,然后将其向右移动,使其实际上位于容器和包装器之外。问题是,它是一个相当大的图像,所以在某些浏览器中,您可以向右滚动以显示图像的其余部分。这是代码。

<html>
<head>
<style>
body{
background: aqua;
margin: 0;
overflow-x: hidden;
}
#wrapper{
background: #fff;
width: 960px;
height: 100%;
margin: 0 auto;
}
#content{
width: 960px;
height: 500px;
background: yellow;
position: relative;
}
#image{
position: absolute;
bottom: 0;
right: -320px;
z-index: 0;
width: 1210px;
height: 468px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="image"></div>
</div>
</div>
</body>
</html>

这里有一个演示它的 fiddle :http://jsfiddle.net/alsweeet/5mqHf/

在主体样式中添加 overflow-x: hidden 似乎可以解决大多数浏览器中的问题,但不是 safari。你会看到我还没有在fiddle demo中加入这个,一旦你加入了,你就不能左右滚动了,这就是我想要跨浏览器实现的效果。

对于这方面的一些建议,我非常感激。我确信可能有比绝对定位更好的方法。

谢谢!

甜甜的

编辑:问题也出现在 Chrome 上,滚动条被隐藏,但您仍然可以横向滚动。不过在 Fire fox 中仍然可以正常工作。

编辑:这是一个屏幕截图,可以帮助解释我在没有任何侧滚动的情况下想要实现的目标。红色框是导致侧滚动的框。可以看到红框在960 wrapper的外面。

enter image description here

最佳答案

这就是你要找的?

演示

http://jsfiddle.net/5mqHf/4/

关于css - 大图像导致浏览器滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12799185/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com