在 Bootstrap 中将图像定位在 div 标签/标签上答案

【问题标题】：Positioning an image over div tag/tags in Bootstrap在 Bootstrap 中将图像定位在 div 标签/标签上
【发布时间】：2018-01-05 02:15:49
【问题描述】：

这就是我想要实现的目标：

位于两个单独的 div 标签之间的图像，例如 facebook 个人资料页面：

我在这里搜索，但解决方案没有多大帮助。它按我想要的方式定位，但由于它是引导程序并且它应该响应，当屏幕尺寸减小时，图像位置会改变，这是我不想要的。

这是代码（可能不合适，因为我只是在测试） -

HTML -

<div class="container">
        <div class="jumbotron jumbo" id="custjumbo">
            <h1>This is a jumbotron... </h1>
            <h2>Let's see what can we make of it..</h2>

            <br>

            <img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger" 
            width="304" height="236">
        </div>
</div>

CSS -

.container {
    background-color: cadetblue;

    }

    .jumbo {

    margin-top:20px;
    position: relative;
    }
    .img-thumbnail {
    position: absolute;
    bottom: -60px;
    right: 200px;
}
    img {
    display: block;
    width: 200px;
    height: 200px;
    background: green;
    }

这就是我所追求的：

【问题讨论】：

标签： html twitter-bootstrap image css positioning

【解决方案1】：

您可以尝试将 img-thumbnail 更改为 position: relative 并使用 'bottom: -60px' 而不是定位 absolute，这样可以在不使用绝对定位的情况下重新定位图像

【讨论】：

【解决方案2】：

检查一下

.container {
    background-color: cadetblue;
    width:100%;

    }

    .jumbo {

    margin-top:20px;
    position: relative;
    }
    .img-thumbnail {
    position: absolute;
    bottom: -90px;
    left:15%;
}
    img {
    display: block;
    width: 200px;
    height: 200px;
    background: green;
    }
    .bottom-div {
    height:200px;
    background-color:red;}

<head>
<meta name="viewport" content="width=device-width, initial-sclae=1">
</head>
<div class="container">
        <div class="jumbotron jumbo" id="custjumbo">
            <h1>This is a jumbotron... </h1>
            <h2>Let's see what can we make of it..</h2>

            <br>

            <img src="images/tiger.jpg" class="img-thumbnail" alt="Tiger" 
            width="304" height="236">

        </div>
                    <div class="bottom-div"></div>
</div>

【讨论】：

好吧，感谢您的努力，但正如我所提到的，它是引导程序，应该正确缩放，所以当我将屏幕尺寸缩小一点时，图像就会超出容器区域。跨度>
使缩略图的位置相对
在整页中检查...它是响应式的