Javascript 对中图像叠加另一个X射线效果

我这里的问题是前面那张照片后面的x光照片。他们不排队。只有当我将浏览器扩展到1920px时，它才会运行。任何小于该值的值都会导致其未对齐。请注意，我特意将图像设置为100%宽度，我知道这是没有响应的。 我想保持图像在浏览器的左右两侧被切断的效果。理想情况下，当我减小浏览器的大小时，我希望两个图像都居中并对齐

以下是Github链接：

---

如果你添加了一把小提琴，那会容易得多，但你需要做的就是添加背景尺寸：封面到肉css规则

html, body, #flesh {
  position: relative;
  margin: 0;
  height: auto;
  max-width: 100%;
  background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
  background-position: center;
  background-size:cover;
}

这样，您的背景图像将适合在容器中，并与原始图像匹配

---

这是一把工作小提琴

对不起，这是我应该做的。这很有效。但是，有没有一种方法可以在调整窗口大小时保持宽度并防止其缩小？基本上我想要的是缩小屏幕，把左右两边的图像切掉。希望这是有意义的。是的，你可以通过将主图像指定为背景图像并设置背景大小：封面；并将100%宽度设置为容器div。这样，它们将居中，但填充容器。当你们调整容器的大小时，它们将保持在相同的位置，注意我将html、body和肉体分开，并将img移到了background-image。图像不会显示出来。如果删除背景尺寸：contain；前面的图像加载了，但它丢失了掩蔽功能。好吧，出于某种原因，JSFIDLE没有保存我的更新。现在看一看。