如何在水平中點處設置背景圖像位置的左邊緣

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和bottom: 0以匹配.text-holder文本的高度做到這一點，然後left: 50%以獲取圖像的左邊緣需要的地方。 我申請width: 50%，但這不是嚴格需要。

最後，要將圖像縮放到絕對定位的容器的高度，請使用height: 100%，寬度將相應調整。

這可能看起來不優雅，但它的工作原理。或者，您可以將圖像作爲.img-holder元素的背景圖像，但最終的結果是相同的，您仍然是.img-holder元素。

注意：我認爲你不希望文本重疊圖像，否則，背景圖像技術將工作（大約）。

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

<div class="image-on-right"> 
 
    <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.</p> 
 
    </div> 
 
    <div class="img-holder"><img src="http://i.ytimg.com/vi/mEPV2I6dgRM/hqdefault.jpg"></div> 
 
</div>