我有一個包裝容器，比如說在桌面設備上是60%寬度(在移動設備上是100%寬度)。然后我在這一頁上有不同的圖像，它們都有相同的寬度作為包裝。

現在，在調整窗口大小時，我想將這些圖像的寬度設置為等于窗口寬度，并將這些圖像水平放置在頁面中間。

我知道我必須處理窗口大小，窗口寬度，然后用CSS向左移動圖片。但是怎么做呢？ 然后，圖像必須具有帶所有這些參數的inline-style。

假人:

window.addEventListener('resize', function(){
        var img = document.getElementsByClassName("fullwidth");
        var windowWidth = window.innerWidth;
    }, true);

.wrapper {
  padding: 1em;
}

.fullwidth {
  max-width: 100%;
  height: auto;
}

@media (min-width: 800px) {
  body {
    background: #555;
    color: #fff;
  }

  .wrapper {
    max-width: 60%;
    margin: 0 auto;
  }
}

<div class="wrapper">
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
  <img class="fullwidth" src="http://via.placeholder.com/2000x300">
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>

這里有一個使用普通js的解決方案。您可以通過使用jQuery或ES6來改進它。對于全屏圖像，我將寬度設置為calc(100vw - 2em ),它對應于視口寬度的完整大小減去包裝器上設置的填充。

handleResize()方法執行以下操作:獲取包裝寬度并減去窗口寬度。除以2，你應該得到一個負的偏移量，然后應用到圖像的marginLeft樣式屬性。這將圖像推到窗口的左邊，上面的css calc()處理擴展。

希望這有所幫助。

var images = document.getElementsByClassName("fullwidth");
var wrapper = document.getElementById("wrapper");

handleResize = function() {
  var displacement = (wrapper.offsetWidth - window.innerWidth) / 2;
  for (i = 0; i < images.length; i++) {
    images[i].style.marginLeft = displacement + "px";
  }
}

window.addEventListener('resize', function() {
  handleResize();
}, true);

handleResize();

html,
body {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  padding: 1em;
}

.fullwidth {
  width: calc(100vw - 2em);
  height: auto;
}

@media (min-width: 800px) {
  body {
    background: #555;
    color: #fff;
  }
  #wrapper {
    max-width: 60%;
    margin: 0 auto;
  }
}

<div id="wrapper">
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
  <img class="fullwidth" src="http://via.placeholder.com/2000x300">
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>