Css 将背景图像居中放置在两列的左侧

我有一个大图像，一些文本，我想放在两列中，都是50%的宽度，文本在右栏，图像在左栏。我想让左边的一栏从右边的文本中选取它的高度，让图像的中心在左边一栏的中心，无论是垂直还是水平

比如说：

[             ]|[----Text-----]
[             ]|[-------------]
[             ]|[-------------]
[    Image    ]|[-------------]
[    Centre   ]|[-------------]
[             ]|[-------------]
[             ]|[-------------]
[             ]|[-------------]

使左侧列的高度与右侧列的高度相匹配的标准技巧是在两个列周围放置一个容器div，以便左侧列可以是其中的全高，并允许右侧列位于左侧列的顶部。像这样

<div class="container">
    <div class="right-column">Lorem ipsum dolor sit...</div>
</div>

div.container {
    background-image: url(my_big_image.jpeg);
    background-position: ?;
    float: left;
    width: 100%;
}

div.right-column {
    float: right;
    background: white;
    width: 50%;
}

同侧阴唇。。。
分区集装箱{
背景图像：url（my_big_image.jpeg）；
背景位置：？；
浮动：左；
宽度：100%；
}
右列分区{
浮动：对；
背景：白色；
宽度：50%；
}

但是我怎么才能把图像的中心移到左边那列的中心呢？似乎我需要container div包含右列以获得正确的高度，但我需要排除它以获得在左列水平居中的图像

---

理想情况下，我希望在不使用JavaScript的情况下执行此操作

我知道使两列大小相同的标准技巧，但我喜欢使用涉及javascript（或者在我的例子中是jQuery）的不同方法。jQuery不应该仅仅用于此目的，但是如果您的站点有jQuery，那么最好使用它。它还涉及第三个部门

现场演示

（从

blah

区域添加/删除文本，以水平和垂直查看BG图像中心）

HTML

<div class="container">
    <div class="left-column"></div>
    <div class="right-column">blah blah blah blah blah ... blah blah blah</div>
</div>

jQuery

var l = $('.left-column');
var r = $('.right-column');
if (l.height() < r.height())
    l.height(r.height());
else
    r.height(l.height());

var l=$（'.left column'）；
var r=$（'右列'）；
如果（l.高度（）

使用jQuery当然可以做到这一点，但这里有一个仅限于CSS的方法：

演示：

HTML:

#container { position:absolute; }
#image {
    position:absolute;
    left:0;
    width:50%;
    height:100%;
    background-color: #ccc;
    background-image: url(http://www.maniacworld.com/have-a-nice-day.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}
#text { margin-left:50%;}
.clear { clear:both; }

Lorem ipsum dolor sit amet。。

CSS:

#container { position:absolute; }
#image {
    position:absolute;
    left:0;
    width:50%;
    height:100%;
    background-color: #ccc;
    background-image: url(http://www.maniacworld.com/have-a-nice-day.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}
#text { margin-left:50%;}
.clear { clear:both; }

---

您应该使用

$（窗口）.resize（函数（）{..}）.resize（）包装JavaScript以处理正在调整大小的窗口。谢谢！理想情况下，我希望在不使用JavaScript的情况下完成这项工作-我已经编辑好了，以提及这一点！