我只是将图像包装成div,以便在调整屏幕大小时可以准确控制图像的位置。一切都工作得很好,就像,当我调整大小时,左边部分被隐藏了,所以正确的部分也按照我的规格隐藏了。但看起来我的img保持相同的宽度,所以有恼人的水平滚动条。
这是我的现场演示:
http://jsfiddle.net/U3pB9/11/
HTML :
<div id="slideShow">
<img id="ss1" src="http://i.imgur.com/gDRF4rO.jpg">
</div>
CSS :
#slideShow {
width:1200px;
height:329px;
margin:auto;
}
#ss1 {
width:1920px;
height:329px;
display:block;
position:relative;
left:-360px;
overflow:hidden;
border-bottom:3px solid rgb(254,199,73);
}
所以,我试图为我的图片设置动态权重,等于用户屏幕宽度,但它不会起作用。调整屏幕大小但图像宽度错误时,数字是正确的。我试图把溢出:隐藏在我的img id中,但是再一次,没有任何事情发生。调整窗口大小时,滚动条仍然存在。
那么,当你调整屏幕大小时,如何隐藏那个水平滚动条?如何摆脱图片的正确部分?
编辑部分
由于我的英语不好(笑),这里有两张我想要实现的图片:
假设用户的屏幕宽度为1920px。 我的图片看起来像这样: http://tinypic.com/view.php?pic=29zat0&s=8#.UxSJ5_nxo9U
然后,如果用户调整窗口大小,让我们说大约1700,甚至1500 px,我的图片将如下所示: http://tinypic.com/view.php?pic=241qpvl&s=8#.UxSJ_Pnxo9U
如您所见,即使调整窗口大小直到屏幕大小达到1200px宽度,我的图像也会居中1200像素。所以图像的左侧部分是隐藏的,因为图像的右侧部分也被隐藏了! (然后,当屏幕显示为1200px时,我将使用%)中的媒体查询调整其大小。
答案 0 :(得分:2)
明确设置宽度。由于孩子的宽度大于父母的宽度,孩子会溢出。
[edit]要删除滚动条,基本上是同样的问题。设置溢出:隐藏给孩子只会影响孩子,而不影响孩子。在这种情况下,#slideShow将溢出,因为隐藏只会影响#ss1。
将子项的宽度设置为100%。这意味着它将是容器宽度的100%。
[edit]设置受影响父母的溢出。在这种情况下,它是#slideShow的父级或
body {
overflow: hidden; /*removes scrollbar on the body */
width: 100%;
}
#slideShow {
width: 100%; /* Sets width to body */
}
#ss1 {
width: 100%; /* Sets widht to #slideShow */
}