左侧容器外的溢出图像

Question

在这里跟我说，这有点难以解释......

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

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

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

• 我不想拉伸此图像的时间长于图像的自然宽度
• 我首选<img> - 标签代替background-image，但如果不可能，我可以接受。

此JSFiddle

中提供了一些代码

Answer 1

使用

.imgLeft{
    direction: rtl;
}

或

.imgLeft{
    position: relative;
}

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

Answer 2

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

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