TwentyTwenty.jsの画像を中央に保存する方法は？

Question

画像を比較するのにTwentyTwenty.jsコードを使用したいと思います。それは、画像が左側に揃えられていることを除いて、すべて素晴らしい作品です。コンテナの幅を明示的に設定せずに、どうやって中心に置くことができますか？

<div id="beforeafter" class="twentytwenty-container"> 
    <img src="https://lorempixel.com/800/300/sports/2/"> 
    <img src="https://lorempixel.com/800/300/sports/3"/> 
</div> 

$(window).load(function() { 
    $("#beforeafter").twentytwenty(); 
}); 

http://codepen.io/anon/pen/EmEYjQ

私は、コンテナの上に固定幅を設定した場合の画像が中央にありますが、私は彼らが画面

より広くはないことを除いて、画像は幅に制限されていないことを好むだろう

私がハンドルよりもフレックスセンタリングを使用している場合は、私はあまりにもそれで苦労して持っていた中央

display: flex; 
    justify-content: center; 

Answer 1

ではありません！
私は関連性のあるすべてのCSSに多くの時間を費やしました。

最後に...ここでシンプルなソリューションです：

$(window).load(function() { 
    // Was there. 
    $("#beforeafter").twentytwenty(); 

    // Mesure your images and divide by 2. 
    var imgWidth = $("#beforeafter img").width()/2; 

    // On the container, apply a left offset of 50% (screen center) - minus half image width. 
    $("#beforeafter").css({"position":"relative","left":"calc(50% - "+ imgWidth+ "px)"}); 
}); 

CodePen

は、