Question

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

以下是JsBin的片段：http://jsbin.com/dacamemule/edit?output

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

感谢您的帮助。

Answer 1

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

但是，如果您确实想将图片用作背景，请不要使用<img>标记。使用background或某个帮助程序（容器）的<body>属性，并使用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的内容。你正在覆盖的图像也是如此。

Answer 2

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

整页背景图像无响应

2 个答案: