在调整大小时将图像宽度设置为窗口宽度（没有 jQuery）

Question

我需要一些帮助:)。

我有一个包装容器，例如在桌面设备上的宽度为 60%（在移动设备上为 100% 宽度）。然后我在这个页面上有不同的图像，它们的宽度都与包装器相同。

现在调整窗口大小，并希望将这些图像的宽度设置为等于窗口宽度并将这些图像水平放置在页面中间。

我知道我必须处理window resize、window width，然后用 CSS transform 将图像向左移动。但是怎么做？ 然后图像必须具有所有这些参数的内联样式。

假人：

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>

谢谢

顺便说一句：我需要这种用于 Wordpress 主题的布局，因为我没有找到任何解决方案让 WP 将图像设置为全宽，将图像放置在帖子中，同时有一个包装容器。

Answer 1

这是一个使用纯 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>