将图像挂起屏幕而不会破坏响应

Question

我有一个问题是将图像悬挂在它的容器/屏幕外，而不会破坏网站的响应能力。主要问题是您必须根据图像的位置向右和向左滚动。

以下是我正在尝试实现的示例（向下滚动时产品图像左右）： http://invisionapp.com/

这是我到目前为止的地方： http://codepen.io/darcyvoutt/pen/EKRmOZ

图片上的代码是：

.section {
  height: 505px;
}

.left, .right {
  display: block;
  float: left;
  width: 50%;
}

.left {
  background: yellow;
}

.right {
  position: relative;  
}

.image {
  max-width: none !important;
  height: 507px !important;
  width: 873px !important;
  display: block;
}

如果您对我偶然遗漏的事情有任何疑问，请告诉我。

Answer 1

尝试：

import java.io.ByteArrayOutputStream;
...
// example image
BufferedImage image = new BufferedImage(4, 3, BufferedImage.TYPE_INT_ARGB);

// to array
ByteArrayOutputStream bos = new ByteArrayOutputStream();
ImageIO.write(image, "jpg", bos);
byte [] output = bos.toByteArray();
System.out.println(Arrays.toString(output));

应该使用此.wrap { ... overflow: hidden; } .image { position: absolute; .right & { left: 40%; } .left & { right: 60%; } } ：

HTML