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

-1

首先，我对自适应设计很陌生。如何将div form放置在响应式图像上

我想这个着陆页转换为响应式设计：

的图像我tryed使用img-responsive类从引导，

但我问题是：

如何放置联系表格需要插入图像一部分的橙色框中（红色框架只是指向，而不是设计的一部分）。
我该如何制作图像和表单，让它对它响应？

感谢

来源

2014-09-04 user3401991

您是否能够从图像中移除橙色框，并且仅将图像作为背景，而其他所有内容都是使用HTML和CSS标记的？（即橙色框作为div，其中的文字和联系人窗体） – Lee 2014-09-04 13:59:07

不，这是他们在我的新工作中决定的。有什么关系？ II认为它是一样的东西或没有它:-) – user3401991 2014-09-04 14:01:46

它很重要，如果你能够使用标记创建橙色和内容，那么这将使它更容易优化响应能力 – Lee 2014-09-04 14:18:00

如果花费在一个div 100％的宽度，你可以使用另一个DIV中与立场：绝对和调整它，你想让它（如右图：50px的底部：50px的;）。给母公司一个位置：相对位置以确保它位于里面。

然后，您可以使用百分比宽度或使用left：50px和whatnot。并使用CSS媒体查询，使其正确显示。

另一种方法是使用图像作为背景图像并使用具有绝对位置的子div，但是您可能会在正确跨浏览器时出现问题。

我不知道你是什么意思的img响应，从什么框架呢？

来源

2014-09-04 14:04:18 Martinspire

img-responsive = bootstrap – user3401991 2014-09-04 14:05:26

比像我说的，使用'position：relative'的父母div，并把'class =“img-responsive”'放在你的图像里面， ;底部：50px;左：50像素;右：50px;'。并使用任何其他媒体查询来使其适合跨屏。 – Martinspire 2014-09-04 14:13:42

表格中的字段和标签怎么样？我做了你所提供的东西，而在移动视图中，该领域正在走出橙色盒子。 – user3401991 2014-09-04 14:25:49

试试这样的事情。您还应该使用col类，以更好地提高响应速度。

<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>

来源

2014-09-04 16:12:54

请尝试下面的解决方案。

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

的div包含在图像的顶部一切都将与图像一起改变。

来源

2018-01-14 13:30:09 Hariz

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

回答

相关问题