Question

我正在尝试在我的背景图像上获取一个表单，并且仍然可以正确调整大小（即使我必须进行媒体调用）。我能够让它在正确的位置，但不是在我调整窗口大小时。

我有这个HTML：

<html><head>
... links and js
</head>
<body>
<header></header>
<main role="main"><div id="home-page-wrap">
    <div class="container-fluid">
      <img id="full-notebook" class="notebook-img" src="/assets/full-notebook-4408c34201b7213bbdc584452ea7365f.png" alt="Full notebook">
      <div class="container-fluid">
        <div class="col-xs-8 col-sm-6 col-lg-4 col-sm-offset-3 col-xs-offset-1 col-lg-offset-4" id="menu-wrap">
          <div id="main-page-form-wrap">
            <form id="main-page-form">
              <h2 id="menu-head">
                COMPOSITION
              </h2>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div></main>

</body></html>

这是我的图像（800x1054，但我可以调整大小），我正在尝试将表单放在笔记本的白色部分中：

notebook-img

如果有帮助，我也可以将白色部分创建为单独的元素。

~~添加了一个小提琴：http://jsfiddle.net/m5hbh9g3/2/~~ 我的小提琴并没有给出一切。

添加了一个bootply：http://www.bootply.com/tsDRUp0wym

Answer 1

尝试一下：

#main-wrap {
    width: 100%;
    height: 100%;    
}
#main-wrap img, #main-wrap h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
#main-wrap h2 {
    top: 200px;
    padding-left: 4em;
}

您的笔记本图片现在包含在<img>标记中，我将所有内容与变换完全一致，这确保了居中。 h2有一些填充，如果你改变字体大小，它应该缩放。

http://jsfiddle.net/m5hbh9g3/5/

Answer 2

我也相信绝对定位会是你最好的选择。如果你想要一个流畅的布局，我会用百分比代替像素。

为获得最佳的响应结果，我会将该背景设置为实际图像，并将其宽度设置为100％，自动高度为。这样它将始终覆盖其父级的整个宽度，并保持宽高比。

然后你必须以百分比计算白色方块的位置。下图说明了这是多么容易

enter image description here

然后只需使用这些百分比来定位表单：

#main-wrap form {
    position: absolute;
    top: 14.7%;
    left: 27.5%;
    width: 55.6%;
    height: 22.9%;
}

这是更新的小提琴（在表格周围用红色轮廓来表示）。调整大小，表格应保持不变。请注意，您可能需要在小屏幕上进行替代布局，因为表单将变得非常小而且不是用户友好...

http://jsfiddle.net/m5hbh9g3/6/

浮动图像上的文字并做出回应？

2 个答案: