在图片上浮动文字并做出回应？
杰夫
我正在尝试在我的背景图片上获取一个表格，并且仍然正确调整其大小（即使我必须进行媒体调用）。我已经能够将其放置在正确的位置，但是当我调整窗口大小时却无法。
我有这个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，但是我可以调整大小），并且我试图将表格放入笔记本的白色部分：
如果有帮助，我还可以将白色部分创建为单独的元素。
添加了一个小提琴：http : //jsfiddle.net/m5hbh9g3/2/我的小提琴并没有提供一切。
添加了一个bootply：http : //www.bootply.com/tsDRUp0wym
颜色
我也相信绝对定位将是您的最佳选择。如果您想要流畅的布局，我会选择百分比而不是像素。
为了获得最佳的响应效果，我会将背景设置为实际图像，并将其宽度设置为100％，将其高度设置为自动。这样，它将始终覆盖其父对象的整个宽度，并保持宽高比。
然后，您必须以百分比计算白方块的位置。下图说明了这有多容易
然后只需使用这些百分比来定位表单即可：
#main-wrap form {
position: absolute;
top: 14.7%;
left: 27.5%;
width: 55.6%;
height: 22.9%;
}
这是更新的小提琴（在表单周围带有红色轮廓以进行演示）。调整它的大小，窗体应保留在原位。请注意，您可能必须在小屏幕上选择其他布局，因为表单将变得非常小而不是用户友好的...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在文字上浮动透明PNG
- 2
CSS：列出图像和文字。做出回应
- 3
在图像上浮动Div
- 4
在图像上浮动Div
- 5
CSS; 图片和文字，浮动
- 6
在Android的ActionBar上浮动ImageView？
- 7
如何避免Spyne做出回应？
- 8
页脚向上浮动到列中
- 9
jpg图片无法回应
- 10
浮动图片
- 11
居中文字向左浮动图片，然后删除所有浮动图片以供移动显示
- 12
如何做出回应性的Facebook评论
- 13
Elasticsearch不会对海量数据做出回应
- 14
文字后将图片浮动到底部
- 15
我想用Django回应图片
- 16
<header>元素未在右侧导航栏上浮动
- 17
如何在两个方向上浮动ul？
- 18
不在同一行上浮动，如何修复CSS
- 19
窗口大小调整时右上浮动的Div
- 20
浮动图片Python的平均图片
- 21
Json回应文字显示
- 22
浮动图片在中心
- 23
错误的浮动图片
- 24
RMarkdown图片浮动
- 25
CSS：浮动图片
- 26
图片浮动标签
- 27
浮动图片超出DIV
- 28
如何根据测验中的正确答案做出回应
- 29
做出响应，布局没有浮动？
我来说两句