CODEWITHSUNDEEP
javascriptcssimage
Jörg Steinhauer
Jörg Steinhauer

Reputation: 147

set image width quals to window width on resize (without jQuery)

I have a wrapper-container with, let say 60% width on desktop devices (on mobile 100% width). Then I have different images on this page, they all have same width as wrapper.

Now on window resize I want to set the width of those images equal to the window width and place this images horizontally in the middle of the page.

I know I have to deal with window resize, window width and then move images with CSS transform to the left. But how? The image must then have inline-style with all these parameters.

Dummy:

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>

Thanks

BTW: I need this kind of layout for WordPress theme, since I didn't find any solution for WP to set images to full width, which are placed in a post, while there is an wrapper-container.

Upvotes: 1

Views: 73

Answers (1)

Julio Feferman
Julio Feferman

Reputation: 2676

Here is a solution using plain js. You could improve it by using jQuery or ES6. For the fullscreen image, I set the width to calc(100vw - 2em) which corresponds to the full size of the viewport width minus the padding set on the wrapper.

The handleResize() method does the following: get the wrapper width and subtract the window width. Divide that by two and you should obtain a negative offset which is then applied to the image's marginLeft style attribute. This pushes the image to the left edge of the window and the css calc() above handles the expansion.

Hope this helps.

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>

Upvotes: 1

Related Questions