CSS - 位置图像向左+部分切断+响应+引导

，努力实现上面引导。 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; 
}

然而，当屏幕被调整大小，图像出血到右侧立柱。

来源

2014-11-24 mistermat

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

CSS

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

活生生的例子：http://www.bootply.com/lF9VBcD1wz

来源

2014-11-24 22:40:00 Marcelo

没有办法做到这一点没有容器流体类（即容器）？ – mistermat 2014-11-24 23:53:53

@mistermat您是否想将它延伸到容器外部或截断？如果你希望它被切断，所以它不会溢出容器外部，你可以添加这个CSS'.container {overflow-x：hidden; }' – Marcelo 2014-11-24 23:56:03

@mistermat如果你想让它溢出容器外，你需要稍微改变你的布局。你想要的是流体和非流体行为的混合，所以你需要将图像定位在一个列元素之外。这是一个现场示例：http：//www.bootply.com/diTKVVZ65U – Marcelo 2014-11-25 00:15:18

CSS - 位置图像向左+部分切断+响应+引导

回答

相关问题