使用 CSS 在固定位置的响应式图像上设置元素答案

【问题标题】：Set an element on a responsive image at fixed position using CSS使用 CSS 在固定位置的响应式图像上设置元素
【发布时间】：2018-08-21 14:45:40
【问题描述】：

我正在尝试在响应式设计期间固定的响应式图像上设置标签元素位置。但是 A 标签元素未设置在固定位置。这是我尝试过的。

function SetSize() {
  var imgW = 1920;
  var imgH = 1080;
  var winW = $(window).width();
  var winH = $(window).height();
  var scaleW = winW / imgW;
  var scaleH = winH / imgH;
  var fixScale = Math.max(scaleW, scaleH);
  var setW = imgW * fixScale;
  var setH = imgH * fixScale;
  var moveX = Math.floor((winW - setW) / 2);
  var moveY = Math.floor((winH - setH) / 2);
  $('#bg').css({
    'width': setW,
    'height': setH,
    'left': moveX,
    'top': moveY
  });
}

.status {
  left: 36.1%;
  top: 15.6%;
}

#contents a {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
</head>

<body>
  <img src="test.jpg" width="100%" height="100%" id="bg" />
  <div id="contents">
    <a href="" class="status">On</a>
  </div>
</body>

</html>

【问题讨论】：

我不太清楚您的意思，您是否想要在调整大小时保持在同一位置的图像顶部的某种叠加层？
是的，没错。将显示状态指示。

标签： jquery css responsive-design

【解决方案1】：

我建议为body（和margin: 0）添加height: 100% 以固定body 的高度，这是img 和a 的相对父/位置锚点。另外，我会将display: block 应用于图像，以避免由于是内联元素而导致其下方的下行空间。

function SetSize() {
  var imgW = 1920;
  var imgH = 1080;
  var winW = $(window).width();
  var winH = $(window).height();
  var scaleW = winW / imgW;
  var scaleH = winH / imgH;
  var fixScale = Math.max(scaleW, scaleH);
  var setW = imgW * fixScale;
  var setH = imgH * fixScale;
  var moveX = Math.floor((winW - setW) / 2);
  var moveY = Math.floor((winH - setH) / 2);
  $('#bg').css({
    'width': setW,
    'height': setH,
    'left': moveX,
    'top': moveY
  });
}

html,
body {
  height: 100%;
  margin: 0;
}

img#bg {
  display: block;
}

.status {
  left: 36.1%;
  top: 15.6%;
}

#contents a {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
</head>

<body>
  <img src="test.jpg" width="100%" height="100%" id="bg" />
  <div id="contents">
    <a href="" class="status">On</a>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我发现创建图像覆盖的最佳方法是在带有position: relative 的 div 上使用 background-image，然后在该 div 中使用 position: absolute 创建覆盖 div。然后您所要做的就是告诉image-container 它需要多大，然后覆盖将移动到它需要移动的位置。

CSS

  .image-container{
      background-image: url('path/to/image.png');
      background-size: cover;
      width: 100%;
      height: 100%;
      position: relative;
  }

  .image-container .overlay{
     position: absolute;
     left: 36.1%;
     top: 15.6%;
  }

HTML

  <body>
     <div class="image-container">
        <div class="image-overlay">
           <a href="" class="status">On</a>
        </div>
     </div>
  </body>

【讨论】：

【解决方案3】：

一方面你的标签没有关闭。

【讨论】：