html - 如何将 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 像素也会居中。因此，图像的左侧部分被隐藏，图像的右侧部分也被隐藏! (然后，当屏幕达到 1200px 时，我将使用媒体查询来调整它的大小)

Answer 1

问题

宽度已明确设置。由于子级的宽度大于父级，因此子级会溢出。

[编辑]要删除滚动条，本质上是同样的问题。设置overflow:hidden给子进程只会影响子进程，不会影响父进程。在这种情况下，#slideShow 将溢出，因为隐藏仅影响#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 */
}