html - CSS:在比实际元素小的容器中水平居中

Question

我有一个带有背景图像的灵活大小 slider 的概念(例如，放置在网页的顶部)。背景图像的可见部分取决于屏幕尺寸。 slider 的宽度始终为 100%。 slider 高度固定为 n 像素。下图最好地展示了这个概念。

另请参阅此 JSFiddle:http://jsfiddle.net/e76m3qja/并调整结果面板的宽​​度。

我的代码几乎可以正常工作，但我无法将图像在可见(红色)框中水平居中。我怎样才能做到这一点？是否有现有的解决方案(最好用于 Bootstrap )？

有一个类似问题的解决方案，但不幸的是它完全打破了我的概念:https://stackoverflow.com/a/24635599/395879

Answer 1

这是解决方案

你的 HTML

 <div  class="dynamicIMG" /></div>

你的 CSS

.dynamicIMG{
    width:100%;
    background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Holloways_beach_1920x1080.jpg/1280px-Holloways_beach_1920x1080.jpg) no-repeat center center;
    height: 100px; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

砰!

示例:http://jsfiddle.net/khaledalyawad/sud703z9/4/