Question

我正在尝试将图像嵌套在另一个图像上（使用twitter引导程序）问题是当我重新调整浏览器大小时，箭头图像不一致（参见图像）

应该是：

enter image description here

但是当浏览器重新调整大小时：

enter image description here

，代码是：

<div class="container">
<div class="row">
    <div class="col-lg-4">
        <div>
            <img alt="" src="../images/fulltime.png" class="img-responsive" />
            <img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />
            <label style="position: absolute; top: 12px; left: 43px; font-size: 19px; font-family: Trebuchet MS;
                color: White;">
                Professional
            </label>
            <p style="position: absolute; top: 80px; left: 25px; font-size: 13px;">
                random text
                <br />
                random text
                <br />
                random text
            </p>
        </div>
    </div>
  </div>
</div>

我在这里做错了什么？或者是不可能的？

注意：我只是使用bootstrap更改我最近的Web，所以我对这些东西不熟悉，如果有帮助我会使用bootstrap v3。

谢谢。

Answer 1

找到了解决方案，只需在img-responsive代码

中添加<div class="col-lg-4">类

制作<div class="col-lg-4 img-responsive">

现在，无论浏览器屏幕如何重新调整大小，图像都保持“完整”，欢呼！

Answer 2

目前你正在使用top: 170px; left: 341px或者说从左边开始进入341px，从顶部开出170px。如果你使用底部和右部而不是顶部和左部来定位它，那么它将锚定到右下角，你将会说“从底部开始这么多px，从右边那么多”

所以而不是：

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; top: 170px; left: 341px" />

有类似的东西：

<img alt="" src="../images/arrow.png" class="img-responsive" style="position: absolute; bottom: 50px; right: 19px" />

更改数字以适应但请注意top现在是bottom而left现在是right

在twitter bootstrap中将图像嵌套在另一个上面

2 个答案: