設置圖像寬度quals窗口寬度調整大小（沒有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>

感謝

BTW：我需要這種佈局的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>