如何将 img 的宽度百分比包裹在特定的 div 宽度中？

Question

我只是将图像包装到一个 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 中设置一个溢出：隐藏，但话又说回来，什么也没发生。调整窗口大小时，滚动条仍然存在。

那么，当你调整屏幕大小时，如何隐藏那个水平滚动条呢？如何去掉图片的正确部分？

---

编辑部分

由于我的英语不好（大声笑），这里有两张我正在努力实现的目标：

假设用户的屏幕宽度为 1920 像素。 我的图像将如下所示： http://tinypic.com/view.php?pic=29zat0&s=8#.UxSJ5_nxo9U

然后，如果用户将他的窗口大小调整为 1700 像素左右，甚至 1500 像素，我的图片将如下所示： http://tinypic.com/view.php?pic=241qpvl&s=8#.UxSJ_Pnxo9U

如您所见，即使调整窗口大小直到屏幕尺寸达到 1200 像素宽度，我的图像的 1200 像素仍居中。所以图像的左侧部分被隐藏，因为图像的右侧部分也被隐藏了！ （然后，当屏幕达到 1200 像素时，我将使用 % 的媒体查询来调整它的大小）

Answer 1

问题

宽度是明确设置的。由于child的宽度大于parent，所以child会溢出。

[edit] 移除滚动条，本质上是同样的问题。设置溢出：对孩子隐藏只会影响孩子而不影响父母。在这种情况下，#slideShow 会溢出，因为 hidden 只会影响 #ss1。

解决方案

将两个孩子的宽度设置为 100%。这意味着它将是容器宽度的 100%。

[编辑] 在受影响的父母上设置溢出。在这种情况下，它是#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 */
}