如何将 div\form 放置在响应式图像上答案

【问题标题】：How do I place div\form on a responsive image如何将 div\form 放置在响应式图像上
【发布时间】：2018-01-14 21:30:09
【问题描述】：

首先我是响应式设计的新手。

我正在尝试将此登录页面转换为响应式设计：

对于我尝试使用引导程序中的 img-responsive 类的图像，

但我的问题是：

如何放置联系表格需要插入到橙色框内，该框是图像的一部分（红框只是为了指向，不是设计的一部分）。
如何使图像和我放置在其上的表单具有响应性？

谢谢

【问题讨论】：

您是否能够从图像中删除橙色框，只留下图像作为背景，而使用 HTML 和 CSS 将其他所有内容作为标记？（即橙色框作为 div，其中包含文本和联系表格）
不，这是他们在我的新工作中做出的决定。有什么关系？我认为不管有没有它都是一样的:-)
这很重要，如果您能够使用标记创建橙色和内容，那么这将使响应性优化变得更加容易
我的意思是当我想放置我的 div 时，图像上的位置是相同的，标记也是。
您能否向我们展示您正在使用的图像的原始形式？

标签： html css responsive-design twitter-bootstrap-3

【解决方案1】：

如果它在一个 div 上占用 100% 的宽度，您可以在其中使用另一个 div，其中 position: absolute 并将其对齐到您想要的位置（例如 right: 50px bottom: 50px; ）。给父 div 一个 position:relative 以确保它位于内部。

然后您可以使用百分比宽度或使用 left:50px 等等。并使用 css 媒体查询使其正确显示。

另一种方法是将图像用作背景图像并使用具有绝对位置的子 div，但您可能会遇到跨浏览器正确获取高度的问题。

我不确定你所说的 img-responsive 是什么意思，是从什么框架来的？

【讨论】：

img-responsive = bootstrap
就像我说的那样，使用带有position:relative 的父div 并将带有class="img-responsive" 的图像放入其中，并在带有position:absolute; bottom: 50px; left:50px; right: 50px; 的表单中放入单独的div。并使用您使用的任何其他媒体查询使其适合跨屏幕尺寸。
表单中的字段和标签呢？我做了你提供的东西，在移动视图中，该字段已脱离橙色框。
如果你使用网格行（里面有列），你可以防止这种情况发生。小视图的列应该比大视图少。所以行和列或者你自己用媒体查询做的东西，以确保这些东西不会出去。不要在侧面强制像素宽度，否则它可能会损坏，请保持百分比。

【解决方案2】：

试试这样的。您还应该使用 col-xs-, col-sm- 类来提高响应能力。

<div class="container-fluid">
 <div class="row-fluid">
    <div class="span12">
        <div style="position:relative;width:200; height:89px; background-color:green; 
         top:54px; left:0" class="img-responsive">
           <div style="left:15px; top:54px; position:absolute;">
             <form method="post" action="">
               <input type="text" name="name"/>
               <input type="submit" name="submit" value="go"/>
             </form>
        </div>
        </div>
    </div>
 </div>
</div>


<style type="text/css">
.span12{ background-image: url('../images/video-player-background.png'); 
background-repeat: no-repeat; background-size: 100%; min-height: 1024px;}
</style>

【讨论】：

【解决方案3】：

试试下面的解决方案。

<div clas="img-responsive" style="position: relative;">
    <img src="example.jpg"></img> <!--That image-->
    <div style="position: absolute;" height= 100%; width: 100%"></div>

div 包含图像顶部的所有内容，将随图像一起改变。

【讨论】：