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

Question

首先，我对响应式设计不熟悉。

我正在尝试将此着陆页转换为响应式设计：

我试图从bootstrap中使用类img-responsive，

但我的问题是：

1. 如何放置联系表格需要插入作为图像一部分的橙色框内（红框仅指向，而不是设计的一部分）。

2. 如何使图像和我正在放置的图像响应？

由于

Answer 1

如果它在div上占用100％宽度，你可以在其中使用另一个div，其位置为：absolute并将其对齐到你想要的位置（如右：50px bottom：50px;）。给父div一个位置：相对于确保它位于内部。

然后您可以使用百分比宽度或使用左：50px和诸如此类。并使用css媒体查询使其正确显示。

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

我不确定img-responsive的含义是什么？从什么框架来看？

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

Answer 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包含图像顶部的所有内容将与图像一起更改。