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

Question

I need some help :).

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 and wanna 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 found any solution for WP to set images to full width, wich are placed in a post, while there is an wrapper-container.

Answer 1

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>