Question

尝试构建一个我有半页图像和其他半文本的网页。

到目前为止，这就是我所拥有的，我有它的工作，当我缩小页面时，文本与照片重叠。

.css文件：

.z-img{
padding: 0 0 10px 0;
border: none;
border-radius: 0;
position: fixed;
}
.z-content {
padding: 70px 0 10px 0;
color: #c0d1ca
}

html文件：

<div class="container-fluid">
<div class="row">
    <div class="span6">
        <div class="z-img">
            <img src="...." width="732" height="432">
    </div>
</div>
    <div class="span6  text-center">
        <div class="z-content">
            <div class="well">
                <h2> About Me: </h2>
            </div>
            <div>
                <blockquote>
                   <p>............</p>
                </blockquote>
            </div>
       </div>
   </div>
   </div>

我想确保当我缩小页面时可以说在移动设备上，我不希望文本重叠图像。也可以根据屏幕尺寸缩小和放大图像，而不是将其作为静态尺寸？我确实希望它覆盖半页但是

Answer 1

我已经弄明白了，我只需要将class =“img-responsive”标签添加到我的照片标签中。

使用容器流体重叠列引导程序

1 个答案: