Jquery 我需要一个固定宽度的容器中的图形和图像来跨越浏览器窗口的整个宽度

如果可能的话，我想用CSS解决这个问题，但是如果需要的话，我可以使用一点jQuery

在我的笔（下面的链接）中，我需要获取figure.image-x-large（以及其中的图像内容），以跨越浏览器窗口的整个宽度，即使它位于1230px容器中。我不能修改结构，但可以在需要的地方添加/删除类

我在这里看到了一个类似的问题，但使用该解决方案，您无法使图像下方的内容正常流动。我笔中的全幅图像下方的内容需要在其下方正确流动

我的HTML：

<article class="content">
  <h3>This is a headline</h3>
  <p>Across the centuries brain is the seed of intelligence, citizens of distant epochs, consciousness Apollonius of Perga billions upon billions Drake Equation network of wormholes another world Sea of Tranquility intelligent beings preserve and cherish
    that pale blue dot citizens of distant epochs globular star cluster network of wormholes another world? Vangelis Euclid hydrogen atoms tendrils of gossamer clouds quasar kindling the energy hidden in matter Cambrian explosion citizens of distant epochs
    dream of the mind's eye, a mote of dust suspended in a sunbeam rings of Uranus Orion's sword made in the interiors of collapsing stars. How far away. Across the centuries intelligent beings.</p>
  <p>Corpus callosum courage of our questions how far away rogue circumnavigated hearts of the stars realm of the galaxies gathered by gravity cosmos, quasar extraplanetary. Of brilliant syntheses Drake Equation network of wormholes dispassionate extraterrestrial
    observer made in the interiors of collapsing stars dispassionate extraterrestrial observer hydrogen atoms culture astonishment another world paroxysm of global death dispassionate extraterrestrial observer prime number hundreds of thousands vanquish
    the impossible ship of the imagination. Descended from astronomers trillion descended from astronomers. Ship of the imagination encyclopaedia galactica, courage of our questions. Are creatures of the cosmos?</p>

  <figure class="image-x-large">
    <span class="img ">
      <img src="http://www.fillmurray.com/1250/750" class="" alt="" width="940" height="705">
    </span>

    <figcaption>
      <div class="caption">Franck Bacquet stands outside Ohm Force's first real office in 2006. The signage advertises French Fries and kebabs.</div>
      <div class="credit">&nbsp;Image: Ohm Force</div>
    </figcaption>
  </figure>

  <p>At the edge of forever as a patch of light with pretty stories for which there's little good evidence rings of Uranus tesseract radio telescope of brilliant syntheses, made in the interiors of collapsing stars astonishment Cambrian explosion prime number.
    The ash of stellar alchemy take root and flourish bits of moving fluff, citizens of distant epochs consciousness as a patch of light how far away. Sea of Tranquility prime number inconspicuous motes of rock and gas rich in mystery a still more glorious
    dawn awaits galaxies great turbulent clouds citizens of distant epochs. Astonishment vanquish the impossible Hypatia.</p>
  <p>Hundreds of thousands radio telescope, courage of our questions shores of the cosmic ocean dream of the mind's eye, kindling the energy hidden in matter Euclid. The sky calls to us, a still more glorious dawn awaits! Light years. Descended from astronomers
    cosmic fugue, a billion trillion Flatland extraordinary claims require extraordinary evidence gathered by gravity birth Sea of Tranquility, Vangelis two ghostly white figures in coveralls and helmets are soflty dancing, birth tesseract, tingling of
    the spine, ship of the imagination hydrogen atoms, not a sunrise but a galaxyrise cosmic fugue and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
  <p>The ash of stellar alchemy take root and flourish bits of moving fluff, citizens of distant epochs consciousness as a patch of light how far away. Sea of Tranquility prime number inconspicuous motes of rock and gas rich in mystery a still more glorious
    dawn awaits galaxies great turbulent clouds citizens of distant epochs. Astonishment vanquish the impossible Hypatia.</p>
</article>

---

提前谢谢你

正如您可能期望的那样，我强烈建议您重新构建HTML，而不是尝试用css解决这个问题（这只有在使用hacky css时才可能）

我所说的黑客css是：

figure{
    width: 100vw;
    position: relative;
    left: calc( -0.5 * (100vw - 1230px) );
}

---

使用此方法，您还必须通过添加媒体查询来处理比1230px更小的屏幕，但您当前的css还不能扩展到更小的屏幕。

第一部分实际上非常简单，因为有处理浏览器窗口的单元。第二部分比较困难，因为需要将图像移动到窗口的边缘。因为你有

位置：相对position:absolute一起工作。相反，请尝试以下方法：

figure.image-x-large {
    width:100vw;
    margin-left:50%;
    transform:translate(-50%);
}

这将一直工作到视口达到容器的宽度，然后图像将缩小。你必须输入一个媒体查询来阻止这种情况发生

@media screen and (max-width:1230px){
    figure.image-x-large{
        margin:0;
        transform:translate(0);
    }
}

根据您现在的情况，这将很好地工作

我在“figure”元素之前结束了“article”元素，之后再次打开它

</article>
  <figure class="image-x-large">
      ....
  </figure>
<article class="content">

工作样本


@导入url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400900）；
身体{
字体系列：“源Sans-Pro”，无衬线；
线高：1.5；
字号：18px；
背景颜色：雪；
}
.内容{
宽度：1230px；
保证金：0自动；
填充：0；
溢出：可见；
}
.content.story内容宽度、.content h3、.content p{
左侧填充：200px；
右边填充：200px；
宽度：830px；
位置：相对位置；
}
.内容h3{
字体大小：25px；
颜色：钢蓝色；
}
图1.image-x-large{
显示：表格；
宽度：100%；
保证金：0；
}
图1.image-x-large.img-img{
/*位置：绝对位置；
左：0*/
宽度：100%；
/*最小宽度：1230px*/
高度：自动；
}
图1.image-x-large figcaption{
文本对齐：居中；
字体大小：14px；
边框底部：1px固体粉末蓝色；
垫底：15px；
}

这是一个标题
几个世纪以来，大脑是智慧的种子，远古时代的公民，Perga的阿波罗意识，几十亿亿个虫洞的德雷克方程网络，另一个世界的宁静之海，智慧生物保护和珍惜
那个遥远时代的淡蓝色圆点公民球状星团虫洞网络是另一个世界吗？Vangelis Euclid氢原子薄纱云的卷须类星体点燃隐藏在物质中的能量寒武纪爆炸远古时代的公民
梦见心灵之眼，一粒尘埃悬浮在天王星猎户座剑的太阳光环中，形成于坍塌恒星的内部。有多远。跨世纪的智慧生物

胼胝体是我们质疑“流氓”绕着引力宇宙（类星体系外行星）聚集的星系的恒星之心飞行多远的勇气。辉煌的合成——德雷克方程——冷静的地外虫洞网络
在坍塌恒星内部制造的观测者冷静的地外观测者氢原子文化震惊另一个世界全球死亡的爆发冷静的地外观测者质数数十万败北
想象中不可能的船。从天文学家那里传下来的数万亿是从天文学家那里传下来的。想象之船卡拉狄加百科全书，我们问题的勇气。是宇宙中的生物吗

2006年，Franck Bacquet站在Ohm Force的第一个真实办公室外。招牌上有薯条和烤肉串的广告。
图：欧姆力
在永恒的边缘，有着美丽的故事，几乎没有证据表明天王星tesseract射电望远镜的光环是辉煌的合成物，在坍塌的恒星内部制造，令人震惊的寒武纪爆炸素数。
恒星炼金术的灰烬扎根并繁荣了一点点移动的绒毛，遥远时代的公民意识到这是一片多么遥远的光。宁静之海素数不起眼的岩石微粒和富含神秘气体的一片更加辉煌
黎明等待着银河系——遥远时代的公民们——巨大的湍流云。惊奇战胜了不可能的海帕提亚

成千上万的射电望远镜，我们质疑的勇气，宇宙海洋的海岸，心灵之眼的梦想，点燃隐藏在欧几里得物质中的能量。天空呼唤着我们，一个更加灿烂的黎明在等待着我们！光年天文学家的后裔
宇宙赋格曲，十亿兆的平原非凡的主张需要非凡的证据通过重力收集出生的宁静之海，Vangelis两个穿着工作服和头盔的幽灵般的白色人物在沙发上跳舞，出生时泰瑟拉特，身体刺痛
脊柱，想象氢原子的飞船，不是日出，而是银河宇宙赋格曲，还有几十亿几十亿几十亿

恒星炼金术的灰烬扎根并繁荣了一点点移动的绒毛，遥远时代的公民意识到这是一片多么遥远的光。宁静之海素数不起眼的岩石微粒和富含神秘气体的一片更加辉煌
黎明等待着银河系——遥远时代的公民们——巨大的湍流云。惊愕战胜了谎言
</article>
  <figure class="image-x-large">
      ....
  </figure>
<article class="content">

figure.image-x-large {
   ....
}
figure.image-x-large .img img {
   ....
}
figure.image-x-large figcaption {
   ....
}