1

我想使用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

如果我在容器上设置固定宽度，则图像位于中心，但我希望图像不限于宽度，除了它们不比屏幕宽

如果我使用 flex 居中而不是手柄不在中心

  display: flex;
  justify-content: center;
4

2 回答 2

5

我也很难过！
我花了很多时间在我能找到相关的所有 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)"});
});

代码笔

于 2017-05-11T01:14:17.277 回答
0

看看 -尽管图像宽度，Container 会占用页面的整个宽度。

基本上在第 48 行jquery.twentytwenty.js并添加：

container.css("height", offset.h);
container.css("max-width", offset.w); // See https://github.com/zurb/twentytwenty/issues/50
于 2019-04-08T11:54:56.610 回答