Question

我只是将图像包装成div，以便在调整屏幕大小时可以准确控制图像的位置。一切都工作得很好，就像，当我调整大小时，左边部分被隐藏了，所以正确的部分也按照我的规格隐藏了。但看起来我的img保持相同的宽度，所以有恼人的水平滚动条。

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时，我将使用％）中的媒体查询调整其大小。

Answer 1

问题

明确设置宽度。由于孩子的宽度大于父母的宽度，孩子会溢出。

[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 */
}

如何在特定的div宽度中包含img的宽度％？

1 个答案:

问题

解决方案

实施例