Question

我在这里遇到的问题是前面的X射线图像。他们不排队。只有当我将浏览器扩展到1920px时才会这样做。任何小于它的东西都会导致它不对齐。请注意，我故意将图像设置为100％宽度，我知道它没有响应。我想在浏览器的左右两侧保持图像的效果。理想情况下，当我减小浏览器的大小时，我希望两个图像都居中并对齐。

这是Github链接： https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06

Answer 1

如果您添加了一个更容易的小提琴，但您需要做的就是添加背景大小：封面到#flesh 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;
}

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

这是一个工作小提琴https://jsfiddle.net/w2jjaLn5/

使图像与x射线效果重叠

1 个答案: