左侧容器外溢出图像

Question

请耐心等待,这有点难以正确解释......

下面描述的第一部分工作正常.
在第一张图像上,您会看到一个比我的(引导程序)容器更宽的浏览器屏幕.蓝色是整个屏幕窗口,白色是容器(带有a 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;
}