CSS - 位置图像向左+部分截止+响应+自举

Question

尝试使用Bootstrap完成上述操作。 IE浏览器。一个部分截断到左侧的图像，随窗口调整大小，并保留在左列中。

给出以下HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <img src="img.png" class="hero-img">
        </div>

        <div class="col-xs-6">
            Lorem ipsum
        </div>
    </div>
</div>

我尝试了以下CSS：

.hero-img {
    position: fixed;
    left: -150px;
}

然而，随着屏幕调整大小，图像会渗入右列。

Answer 1

将图像的宽度设置为容器宽度的100％，然后给它一个负的左边距，以便将其移动到画布外＃39;。您还可以考虑将边距更改为百分比，以便随着窗口宽度的变化而变小。

CSS

.hero-img {
    margin-left:-150px;
    width:100%;
}

实例：http://www.bootply.com/lF9VBcD1wz