左侧容器外溢出图像答案

【问题标题】：Overflow image outside container on left side左侧容器外溢出图像
【发布时间】：2018-10-18 23:01:48
【问题描述】：

请耐心听我说，这有点难以正确解释......

下面描述的第一部分工作正常。
在第一个图像上，您会看到一个比我的（引导）容器更宽的浏览器屏幕。蓝色是整个屏幕窗口，白色是容器（带有max-width），其中包含来自引导程序的基本 12 列。
我希望右侧的笔记本电脑比它在引导网格上的 x 列数更宽。当（例如）7个列的宽度为（例如）500px并且图像为800px宽时，它自然会溢出容器（如果图像没有给定宽度，当然）。因此，当您缩小窗口（参见第二张图片）时，您只需将图片剪掉一点。

下面描述的第二部分是问题...
现在我想在左侧有同样的东西......但是当我的引导程序中有 7 个列时，它们是（例如）500px 宽，并且我在里面有一个图像，宽度为 800px 溢出发生自然又在右边了。我希望这个在左边！！所以像 div 里面有一个图像这样的东西是向右对齐的，但溢出在左边。

这就是现在发生的事情：溢出在右侧（当它应该在左侧时）。

我不想将此图片拉伸得超过图片的自然宽度
我更喜欢<img>-tags 而不是background-image，但如果这不可能，我可以接受。

此JSFiddle中提供了一些代码

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用

.imgLeft{
    direction: rtl;
}

或

.imgLeft{
    position: relative;
}

.imgLeft > img{
    position: absolute;
    right: 0;
}

【讨论】：

【解决方案2】：

为图像提供最大宽度将起作用

  .imgRight, .imgLeft img{
   max-width:100%;
  }

【讨论】：

对我不起作用，解决方案标记为答案 fyi