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

Question

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

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

我在这里看到了类似的问题 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">&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>

我的 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;
        }
    }
}

My PEN

提前致谢!

Answer 1

第一部分实际上非常简单，因为有处理浏览器窗口的单元。第二部分有点困难，因为您需要将图像移动到窗口的边缘。由于您在图像的父级上有 position:relative;，它不适用于 position:absolute;。而是试试这个:

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

这将一直有效，直到视口(viewport)达到容器的宽度，然后图像将缩小。您必须输入媒体查询才能阻止这种情况发生。

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