Question

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

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

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

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

其次如何垂直对齐How to vertically align an image inside div

并且内容应该包装在包装器中（宽度：960px; margin：0 auto）;我无法让它一起工作= \

所以基本上需要这个东西来创建一个具有一些大背景的块，这将占据100％的网站宽度，并且在中心会有一些内容。但是这个块的大小将取决于背景图像

我也可以使用jQuery，但我无法弄清楚如何

Answer 1

您可以使用position:absolute;和display:table / display:table-cell;执行此操作。

<强> FIDDLE

HTML：

<div class="wrapper">
    <img src="YOUR_IMAGE" />
    <div class="content">
        <div>
            <div>
                 blahblab
            </div>
        </div>
    </div>
</div>

CSS：

.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;
}

Answer 2

我不确定我是否完全了解你的情况，但这会有效吗？

HTML：

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

CSS：

#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;
}

以下是笔：http://codepen.io/andyngo/pen/seanA

Div与背景图像和居中的内容

2 个答案: