如何停止滚动整个站点的图像？

Question

我正在尝试构建一个全宽面板网站。我使用的 100% 宽度的图像是水平滚动的。我试过 overflow: hidden 试图阻止它，但似乎没有任何效果。有任何想法吗？

CSS:

#widthwrapper {
 width: 1000px;
 margin: 0 auto;
}

#imgbg {
  width: 100%;
  position:relative;
  float:clear;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
display:block;
}

h2 { 
   position: absolute; 
   z-index: 0;
   color:white;
   font-size:50px;
   font-family:Helvetica, Arial, sans-serif;
   text-align:center;
}

HTML:

<section id='panel1'>
<img id='bgimg' src='herobackground.png'/>
<div id='widthwrapper'>
<h2>Where would you like to go?</h2>
</div>
</section>

Answer 1

我不能用你的代码说太多，但如果你想让你的图像响应，那么你必须在你的 css 中设置 img { max-width:100%}。

如何停止滚动整个站点的图像？

How do I stop sitewide image from Scrolling?

html

css

responsive-design