在調整大小時將圖像寬度設置為窗口寬度（沒有 jQuery）

Question

我需要幫助 ：）。

我有一個包裝容器，比如桌面設備上的 60% 寬度（移動設備上的 100% 寬度）。 然后我在這個頁面上有不同的圖像，它們都與包裝器具有相同的寬度。

現在調整窗口大小並希望將這些圖像的寬度設置為等於窗口寬度並將這些圖像水平放置在頁面中間。

我知道我必須處理窗口調整大小、窗口寬度，然后將帶有 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 主題的布局，因為我沒有找到任何解決方案讓 WP 將圖像設置為全寬，將圖像放置在帖子中，而有一個包裝容器。

Answer 1

這是使用普通js的解決方案。 您可以使用 jQuery 或 ES6 改進它。 對於全屏圖像，我將寬度設置為calc(100vw - 2em) ，它對應於視口寬度的全尺寸減去包裝器上設置的填充。

handleResize()方法執行以下操作：獲取包裝器寬度並減去窗口寬度。 將其除以二，您應該獲得一個負偏移量，然后將其應用於圖像的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>