如何使图像和文本在背景上彼此相邻？

Question

我对引导程序完全陌生，已经使用它一周了。 我目前正在为我的女朋友准备一份圣诞礼物，但我真的被困住了。

我想在背景上放置图片和短文本（彼此相邻）。 图像看起来非常像这样：在此处输入图像描述它完全位于左侧，并且在她旁边有文字。 （在图像和文本之间以及文本和右侧屏幕末尾之间也有一点位置。图片从屏幕开始的左侧开始。）

我也希望一切都能够响应。

我尝试了一切，但它从未真正奏效，我在这个问题上浪费了 2 天。 我一个人真的撑不下去了！ 请帮忙！！！

 .section_1 { position: relative; color: #fff; background-color: #bdbdbd; } .picture { content: url(http://i.stack.imgur.com/Zlrxu.png); width: 50%; position: relative; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .text { margin-bottom: 20px; font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, .7); margin-bottom: 20px; }

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <section class="section_1"> <div class="container-fluid"> <div class="row-fluid"> <div class="picture"> <div class="span2"> </div> <div class="span10"> <div class="text"> <p>Lorem ipsum</p> </div> </div> </div> </div> </div> </section>

Answer 1

在 bootstrap 3.x 中，“.row-fluid”类已更改为“.row”，“.span*”类已更改为“.col-*”。 我对您的代码进行了一些更改，并使其按照您的图片链接中给出的方式运行，请单击此处查看 plunker 演示。

HTML文件：

<section class="section_1">
<div class="container-fluid picture">
    <div class="row ">
        <div class="col-sm-5">
          <img src="http://i.stack.imgur.com/Zlrxu.png" class="img-responsive"/>
        </div>
        <div class="col-sm-7 text"><p>Lorem ipsum</p></div>
    </div>
    </div>

CSS文件：

.section_1 {
color: #fff;
background-color: #bdbdbd;}

.text {
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, .7);
vertical-align: middle;}

Answer 2

我不知道你到底是什么意思，但这就是我认为你的意思。 提琴手

:)

Answer 3

我想要这样的东西： NORMAL在移动视图中是这样的： MOBILE

不过还是非常感谢！ :)

Answer 4

当在 rraman 的回答中使用 Bootstrap 时：因为文本可以包含更多的内容，只有一个“Lorem ipsum”，并且文本 div 的高度在较小的屏幕上会变得更大，即使具有类 img-responsive (img-fluid) , 下面会留下空白。 要解决此问题，您可以在 img 上使用此 css：

height: 100%;
width: 100%;
object-fit: cover:
object-position: 50% 50%; //for always to show image center