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

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

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

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

但我的问题是:

  1. 如何放置联系表格需要插入到橙色框内,该框是图像的一部分(红框只是为了指向,不是设计的一部分)。

  2. 如何使图像和我放置在其上的表单具有响应性?

谢谢

【问题讨论】:

  • 您是否能够从图像中删除橙色框,只留下图像作为背景,而使用 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 包含图像顶部的所有内容,将随图像一起改变。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-08-03
      • 1970-01-01
      • 1970-01-01
      • 2021-03-10
      • 2015-02-19
      • 2015-09-03
      • 1970-01-01
      • 2017-11-11
      相关资源
      最近更新 更多