Css 希望我的页面调整大小而不显示从东到西的滚动
我有一个页面,我想消除它从左向右滚动的场景。无论我以何种分辨率观看,它都会在右侧留下约70像素的空白。在我设置的页面上 对于城市图像背景部分,我已经将主体设置为:Css 希望我的页面调整大小而不显示从东到西的滚动,css,responsive-design,image-resizing,Css,Responsive Design,Image Resizing,我有一个页面,我想消除它从左向右滚动的场景。无论我以何种分辨率观看,它都会在右侧留下约70像素的空白。在我设置的页面上 对于城市图像背景部分,我已经将主体设置为: #baner { min-width: 100%; float: left; background: url(../images/city-backgound.jpg); margin-top: 0px; } html { margin: 0px; min-he
#baner {
min-width: 100%;
float: left;
background: url(../images/city-backgound.jpg);
margin-top: 0px;
}
html {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
我还做了一个媒体查询,其中我定义了CSS以根据视口的最大宽度调整图像大小,例如:
@介质(最大宽度:1600px){
#宽度:100%;
}
}
为了让城市景观图像能够拉伸屏幕,我们也尝试了更小的尺寸来制作更小的分辨率,但它就是不起作用
右边始终有一小块空白。即使我将CSS宽度设置为尽可能高(即宽度的高数字),直到屏幕填满为止,我仍然有左右滚动条。我希望图像和背景的大小,以填补屏幕和创造不需要左右滚动。为什么CSS不起作用?快速修复:
带有class='row'
的第一个
导致页面水平滚动;更具体地说:
margin-left: -15px;
margin-right: -15px;
将导致此不需要的空白和水平滚动条
此外,
上的边距应设置为:
margin: 0px;
为了避免某些浏览器(例如Chrome)应用他们喜欢应用的“默认”边距
较长(剩余)修复:
虽然页面上的容器元素正在动态地重新调整大小,但有相当数量的内容并没有这样做。(包括前面提到的横幅图像和包含视频的iframe。)应该考虑用户的视口大小,在从较小的~Tip~查看时:您可以使用
html,body{}
,而不是重复整套规则。我这样做没有用。我做了html{margin:0px;min-height:100%;min-width:100%;}body{margin:0px;min-height:100%;min-width:100%;}嘿,谢谢。我要消化这些信息。非常感谢。就像我说的,我正在努力提高我的技能。没问题,我的朋友,我希望这有点用-不要犹豫,问问你是否需要我更多!嘿,非常感谢!我做了这些事情,但它仍然没有带走右边的空白,但肯定是重置了一些东西。因此,我梳理了我在上面写的东西,并在inspect element中进行了调整,直到找到了罪魁祸首——我在视频播放器div(mdlvdo_a)上设置的边距,去掉了边距,现在我没事了。我只是需要重新设计一些东西,对利润率和其他方面更加小心。再次感谢。当我必须自己从头开始编写代码时,我通常表现得很好,但到目前为止,我一直在继承坏页和有问题的页,以完成我必须消除bug或修复的工作,而且我通常很难去修复我不熟悉的有问题的代码。很高兴听到这些都为您排序,祝您互联网愉快!:)
background-size: 100%;
background: //your-image-location// no-repeat;