CSS：在小于实际元素的容器中水平居中

Question

我有一个灵活的大小调整滑块的概念，带有背景图像（例如，放置在网页的顶部）。背景图像的可见部分取决于屏幕尺寸。滑块的宽度始终为100％。滑块高度固定为n像素。这个概念最好如下图所示。

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

我的代码几乎可以使用，但我无法将图像水平居中于可见（红色）框中。我怎样才能做到这一点？是否有现有的解决方案（最好是自助）？

有类似问题的解决方案，但遗憾的是它完全打破了我的概念：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;}

BOOM！

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

Answer 2

如果删除：

.inner {
min-height: 360px;
min-width: 640px;
max-height: 100%;
max-width: 1280px;
}

http://jsfiddle.net/xdmt6czw/

或者你想保持相同的高度？

Answer 3

为什么不将图像用作背景图像;然后使用0高度结合填充底部作为百分比，这将允许响应高度。删除包含div周围的任何丑陋的空白区域。

然后将其定位50％50％，这将使图像水平和垂直居中。

然后，您可以使用媒体查询来确定图像达到所需宽度和高度时的高度/宽度。

body { margin: 0; }

.outer {
    height: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    min-width: 640px;

    padding-bottom: 27.8%;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Holloways_beach_1920x1080.jpg/1280px-Holloways_beach_1920x1080.jpg);
    background-position: 50% 50%;
    background-size: cover;
}
@media (max-width: 640px) {
    .outer {
        padding-bottom: 0;
        height: 360px;
   }
}

我在这里为您提供了一个简单的例子： http://jsfiddle.net/iamcreative/e76m3qja/5/