css 在resize时设置图像宽度等于窗口宽度(不使用jQuery)

3zwtqj6y 于 2023-05-19 发布在 jQuery

关注(0)|答案(1)|浏览(190)

我有一个 Package 容器，比如说桌面设备上的宽度为60%（移动的上的宽度为100%）。然后我在这个页面上有不同的图像，它们都有相同的宽度作为 Package 。
现在，在窗口调整大小我想设置这些图像的宽度等于窗口的宽度，并将这些图像水平放置在页面的中间。
我知道我必须处理窗口大小，窗口宽度，然后用CSS变换向左移动图像。但是怎么做呢？图像必须具有所有这些参数的内联样式。
假人：

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主题的这种布局，因为我没有找到任何解决方案，可湿性粉剂设置图像全宽，这是放置在一个职位，而有一个 Package 容器。

css

来源：https://stackoverflow.com/questions/46654826/set-image-width-quals-to-window-width-on-resize-without-jquery

1条答案

按热度按时间

ilmyapht1#

下面是一个使用纯js的解决方案。你可以通过使用jQuery或ES6来改进它。对于全屏图像，我将宽度设置为calc(100vw - 2em)，它对应于viewport宽度减去 Package 器上设置的padding的完整大小。
handleResize()方法执行以下操作：得到 Package 宽度并减去窗口宽度。将其除以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>

赞(0）回复(0）举报 2023-05-19

我来回答

css 在resize时设置图像宽度等于窗口宽度(不使用jQuery)

1条答案

相关问题

热门标签

最新问答