整页背景图片没有响应

Question

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

这是 JsBin 上的一个片段：http://jsbin.com/dacamemule/edit?output

背景图像是 1920x1080，这对于小 phones 来说太大了，但我确实尝试使用媒体查询创建一个断点，图像大小设置为 768x432，但它仍然没有用.它应该是一个图像映射，其中的链接将 "stick" 在同一个地方，无论它是桌面视图还是响应式视图。视频中的蓝点就是一个例子。整个地图上应该有更多的点。

感谢您的帮助。

Answer 1

将图像上的位置 "fixed" 更改为 "relative" css。

Answer 2

如果您希望图像具有响应性，您可能需要从 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 的内容不为我们所知。您叠加的图像也是如此。

整页背景图片没有响应

Full page background image is not responsive

css

background

imagemap

responsive