Question

我的问题设置很简单：我希望元素上的背景图像的左边缘位于其容器的左侧和右侧之间。所以喜欢

HTML

<div class="image-on-right" id="this-dude">
    <div class="text-holder">
        <p>His arms spaghetti, knees weak, palms spaghetti. There's spaghetti on his sweater already, mom's spaghetti. He's nervous, but on the surface he looks calm spaghetti.        
    </div>
</div>

CSS

.image-on-right { background-repeat: no-repeat; background-position-x: 50%; background-size: contain; }
.image-on-right > .text-holder { width: 50%; }
#this-dude { background-image: url(http://i.ytimg.com/vi/mEPV2I6dgRM/hqdefault.jpg); }

（https://jsfiddle.net/e78xbuna/）

除了背景图像的中心在50％标记处，而不是它的左侧在50％标记处。因此，如果存在某个属性，我可以应用background-position-translate: translateX(-50%);这就是我正在寻找的。

Answer 1

以下是实现此布局的一种方法。

首先，使用背景图像不起作用（除非您为图像指定了一个，这可能限制太多了。）

如果我这样做，我会使用绝对定位将图像放在.text-holder的右边。

您可以通过将position: relative指定为.image-on-right（父块），然后将position: absolute指定为.img-holder来实现此操作，并设置偏移top: 0和{{1 }}以匹配bottom: 0中文本的高度，然后匹配.text-holder以获取图像的左边缘。我申请了left: 50%，但这不是严格要求的。

最后，要使图像缩放到绝对定位容器的高度，请使用width: 50%，宽度将相应调整。

这可能看起来不太优雅，但它确实有效。或者，您可以将图像作为height: 100%元素的背景图像放置，但最终结果是相同的，您仍然是.img-holder元素。

注意：我认为您不希望文本与图像重叠，否则，背景图像技术会起作用（大约）。

＆＃13;

.img-holder

＆＃13;

.image-on-right {
    outline: 1px dotted blue;
    position: relative;
}
.image-on-right > .text-holder {
    width: 50%;
}
.image-on-right .img-holder {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 50%;
}
img {
    height: 100%;
}
p {
    margin: 0;
}

＆＃13;

如何使背景图像位置的左边缘处于水平中间点

1 个答案: