整页背景图片无响应答案

【问题标题】：Full page background image is not responsive整页背景图片无响应
【发布时间】：2016-05-24 20:57:19
【问题描述】：

我正在尝试调整我网站上的背景图片，但我无法在 Iphone、Nexus 或我正在测试的任何小型手机上将其缩小。我正在使用 Chrome 开发者工具对此进行测试。

这是关于 JsBin 的 sn-p：http://jsbin.com/dacamemule/edit?output

背景图像为 1920x1080，这对于小型手机来说太大了，但我确实尝试使用媒体查询创建一个断点，图像尺寸设置为 768x432，但它仍然不起作用。它应该是一个图像映射，其中的链接将“粘贴”在同一个位置，无论它是桌面视图还是响应式视图。视频中的蓝点就是一个例子。应该有更多的点分布在整个地图上。

感谢您的帮助。

【问题讨论】：

在链接到 jsFiddle.net 时，不要试图规避将代码发布在 in your question 的 SO 规则，为什么不按要求做呢？您选择将无意义的文本突出显示为代码只是为了避免执行红色大警告框要求您执行的操作。
您的 css 中没有分配背景图片
抱歉缺少代码。等我回来后，我会试着用所有的资源做一个小提琴。
我已经用新的 Jsbin 更新了我的问题

标签： css background imagemap responsive

【解决方案1】：

如果您希望图像具有响应性，您可能需要从 img.bg 中删除 min-width:1024px 规则。也许用min-width: 100%; max-width: 100%; height: auto;替换它？

但是，如果您真的想将图像用作背景，则根本不要使用<img> 标记。使用您的<body> 或一些帮助程序（容器）的background 属性，并使用background-size 属性（和所需的前缀）。

概念证明：

body {
  background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
  -webkit-background-size: contain;
     -moz-background-size: contain;
       -o-background-size: contain;
          background-size: contain;
  min-height:100vh;
  margin: 0;
  padding:0;
  overflow-x: hidden;
  font-family: sans-serif;
}
.someLinks {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-box-align: stretch;
     -moz-box-align: stretch;
      -ms-flex-align: stretch;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.someLinks>a {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 0 45%;
      -ms-flex: 1 0 45%;
          flex: 1 0 45%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  color: red;
  text-decoration: none;
}
.someLinks>a:hover {
  background-color: rgba(255,0,0,.35);
  color: white;
}

<div class="someLinks">
  <a href="#" onclick="return false">link</a>
  <a href="#" onclick="return false">link</a>
  <a href="#" onclick="return false">link</a>
  <a href="#" onclick="return false">link</a>
</div>

这只是一个例子。将链接替换为您的实际链接，并在您希望它们处于活动状态时删除它们的 onlick 属性。

到目前为止，您的期望结果尚不清楚，这可能不符合您的目的。请为您的问题创建一个Minimal, Complete, and Verifiable example，正确链接您的所有资源。目前，video.js、index.html 和style.css 的内容对我们来说是未知的。您要叠加的图像也是如此。

【讨论】：

安德烈感谢您的回答。它现在适应每个屏幕。我想使用标签使用背景图像的原因是创建一个带有链接的图像映射，并使用一个 imageMapResizer 插件来计算图像缩放的新坐标。

【解决方案2】：

将图像 css 上的“固定”位置更改为“相对”。

【讨论】：

position:relative; 使图像具有响应性。这是一个非常大胆的声明。你能把它记录下来吗？或许还有测试？
道歉。我读错了问题。我没有意识到它是背景图像，因为图像并没有试图成为小提琴的背景。你是对的，简单地给一个元素一个特定的显示不会使它响应，但是在他的固定显示下，其他元素没有正确流动。相对位置解决了这个问题。再说一次，如果我意识到他想要这张图片作为背景，我的回答会有所不同。道歉