如果可能，我想用CSS解决这个问题，但如果需要，我可以使用一点点jQuery。
在我的笔（下面的链接）中，我需要将figure.image-x-large（以及其中的图像内容）设置为跨越浏览器窗口的整个宽度，即使它位于1230px容器内。我无法修改结构，但可以根据需要添加/删除类。
我在这里看到了类似的问题 full-width div on a fixed-width page ，但是使用该解决方案，您无法使图像下方的内容正常流动。我笔中全宽图像下方的内容需要在其下方正确流动。
我的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"> 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>
我的SCSS：
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);
body {
font-family: "Source Sans Pro", sans-serif;
line-height: 1.5;
font-size: 18px;
background-color: snow;
}
.content {
width: 1230px;
margin: 0 auto;
padding: 0;
overflow: visible;
.story-content-width {
padding-left: 200px;
padding-right: 200px;
width: 830px;
position: relative;
}
h3, p {
@extend .story-content-width;
}
h3 {
font-size: 25px;
color: SteelBlue;
}
figure.image-x-large {
display: table;
width: 100%;
margin: 0;
.img {
img {
width:100%;
height: auto;
}
}
figcaption {
text-align: center;
font-size: 14px;
border-bottom: 1px solid powderblue;
padding-bottom: 15px;
}
}
}
提前谢谢！
答案 0 :(得分：0)
正如您可能期望的那样，我强烈建议您重新构建HTML而不是尝试通过css来解决这个问题（这只能用hacky css来实现）
我正在谈论的hacky css是这样的：figure{
width: 100vw;
position: relative;
left: calc( -0.5 * (100vw - 1230px) );
}
通过添加媒体查询，您还必须使用此方法处理小于1230像素的屏幕，但无论如何，您当前的css不会缩放到较小的屏幕。
答案 1 :(得分：0)
第一部分实际上非常简单，因为有些单元可以处理浏览器窗口。第二部分有点困难，因为您需要将图像移动到窗口的边缘。由于您在图片的父级上有position:relative;，因此它不适用于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);
}
}
答案 2 :(得分：0)
根据你现在所拥有的，这将很好。
我结束了＆＃34;文章＆＃34; ＆＃34;图＆＃34;之前的元素元素，然后我再次打开它。
</article>
<figure class="image-x-large">
....
</figure>
<article class="content">
CSS调整是从你的＆＃34;数字＆＃34;中移除.content类。阶级规则。
figure.image-x-large {
....
}
figure.image-x-large .img img {
....
}
figure.image-x-large figcaption {
....
}
工作样本
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);
body {
font-family: "Source Sans Pro", sans-serif;
line-height: 1.5;
font-size: 18px;
background-color: snow;
}
.content {
width: 1230px;
margin: 0 auto;
padding: 0;
overflow: visible;
}
.content .story-content-width, .content h3, .content p {
padding-left: 200px;
padding-right: 200px;
width: 830px;
position: relative;
}
.content h3 {
font-size: 25px;
color: SteelBlue;
}
figure.image-x-large {
display: table;
width: 100%;
margin: 0;
}
figure.image-x-large .img img {
/* position:absolute;
left: 0;*/
width: 100%;
/* min-width: 1230px;*/
height: auto;
}
figure.image-x-large figcaption {
text-align: center;
font-size: 14px;
border-bottom: 1px solid powderblue;
padding-bottom: 15px;
}<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>
</article>
<figure class="image-x-large">
<span class="img ">
<img src="http://www.fillmurray.com/1250/750" class="" alt="">
</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"> Image: Ohm Force</div>
</figcaption>
</figure>
<article class="content">
<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>