Jquery 具有背景图像和居中内容的Div

我需要用未知大小的背景图像制作一个div。在这个div中，我需要中间的一些内容。

问题是我不知道背景图像的大小

我已经找到了两种解决方案，但我无法让它们一起工作。 首先，如何自动调整div宽度/高度及其背景：

<div style="background:url(...); background-size: contain;">
    <img src="the_same_url" style="visilibity: hidden;">
</div>

第二，如何垂直对齐

内容也应该用包装纸包装（宽度：960px；边距：0自动）；我根本无法让它一起工作=\

所以基本上这是必要的，以创造一个大背景块，将采取100%的网站宽度，在中心将有一些内容。但该块的大小将取决于背景图像

---

我也可以使用jQuery，但我不知道如何使用

position:absolute和
显示：表格
/
显示：表格单元格


HTML:

不确定我是否完全理解你的处境，但这行得通吗

HTML:

这是笔：
2个问题：1）包含图像的div必须是图像的大小或窗口的100%宽度？2） 你真的需要背景中的图像吗？或者它可以是一个
标签？1。嗯，基本上我需要一个覆盖整个网站宽度的图像。我不知道事实上，我想第二窗口是100%。不，可以是img标签。你建议使用绝对位置？这是你想要的吗？或者可能是这样的：但这里你们设定了身体100%的宽度和高度，但我不知道高度和宽度。像你的第一个例子，但图像有几个这样的块，你会怎么做？
<div class="wrapper">
    <img src="YOUR_IMAGE" />
    <div class="content">
        <div>
            <div>
                 blahblab
            </div>
        </div>
    </div>
</div>

.wrapper {
    width:960px;
    margin:0 auto;
    position:relative;
}
.wrapper > img {
    width:100%;
    height:auto;
}
.content {
    top:0;
    position:absolute;
    width:100%;
    height:100%;
}
.content > div {
    display:table;
    width:100%;
    height:100%;
}
.content > div > div {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

<div id="wrapper">
  <div id="background">
     <img src="http://lorempixel.com/400/200/sports/">
  </div>
</div>

#wrapper {
    margin: 0 auto;
    width: 960px;
}

#background {
    background: #ddd url('http://lorempixel.com/400/200/sports/') no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
}

#background img {
    display: inline-block;
}