屏幕尺寸小於500像素時，使用javascript垂直堆疊圖像

Question

當屏幕尺寸小於500像素（例如）時，我正在嘗試使用javascript將圖像疊加在兩個圖像之上。 這些圖像中的每一個都可以具有href鏈接，但並非總是如此。

當大於500px時，這是一些html示例：

<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
  <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
  </a>
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
</div>

我在尋找最好的方法時遇到了麻煩。 最終，當屏幕尺寸小於500px時，我想要這樣的東西：

<div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap">
  <div id="one">      
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/0.png" style="width: 25%; margin-bottom: 10px" alt="" />
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/2.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
 </div><div id="two">
  <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99">
    <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/4.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
  </a>
  <img id="front-end-top" src="https://www.mysite.co.uk/secure/images/banners/3.jpg" style="width: 25%; margin-bottom: 10px" alt="" />
 </div>
</div>

到目前為止，這是一個示例，盡管缺少圖像： http : //plnkr.co/edit/obLQorTFEsI467AHJspm?p=preview

尋找任何有助於我實現目標的幫助或建議。

Answer 1

您是否嘗試過使用CSS媒體查詢來做到這一點？

@media (max-width: 500px) {

    #topbanners1-4-a img {
        width: 50%;
    }

}

Answer 2

您可以使用javascript及其matchMedia並更改內聯樣式，盡管建議使用類和外部CSS規則。

堆棧片段

 function watchMedia(wM) { if (wM.matches) { // If media query matches document.querySelector('#topbanners1-4-a').style.whiteSpace = "normal"; var imgs = document.querySelectorAll('#topbanners1-4-a img'); for(var i=0;i<imgs.length;i++){ imgs[i].style.width = "calc(50% - 10px)"; imgs[i].style.marginBottom = "10px"; if (i % 2 == 1) imgs[i].style.marginLeft = "10px"; } } else { document.querySelector('#topbanners1-4-a').style.whiteSpace = "nowrap"; var imgs = document.querySelectorAll('#topbanners1-4-a img'); for(var i=0;i<imgs.length;i++){ imgs[i].style.width = "25%"; imgs[i].style.marginBottom = "0"; if (i % 2 == 1) imgs[i].style.marginLeft = "0"; } } } var wM = window.matchMedia("(max-width: 700px)") watchMedia(wM) // Call once at page load wM.addListener(watchMedia) // Listen for state changes 

 <div id="topbanners1-4-a" style="display: inline-block; white-space: nowrap"> <img id="front-end-top" src="http://placehold.it/300/f00" style="width: 25%; margin-bottom: 10px" alt="" /> <img id="front-end-top" src="http://placehold.it/300/0f0" style="width: 25%; margin-bottom: 10px" alt="" /> <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99"> <img id="front-end-top" src="http://placehold.it/300/00f" style="width: 25%; margin-bottom: 10px" alt="" /> </a> <img id="front-end-top" src="http://placehold.it/300/f0f" style="width: 25%; margin-bottom: 10px" alt="" /> </div> 

或CSS媒體查詢和外部CSS規則

 #topbanners1-4-a { display: inline-block; white-space: nowrap; } #topbanners1-4-a img { width: calc(25% - 5px); } @media screen and (max-width: 700px) { #topbanners1-4-a { white-space: normal; } #topbanners1-4-a img { width: calc(50% - 10px); margin-bottom: 10px; } #topbanners1-4-a > *:nth-child(even) { margin-left: 10px; } } 

 <div id="topbanners1-4-a"> <img id="front-end-top" src="http://placehold.it/300/f00" alt="" /> <img id="front-end-top" src="http://placehold.it/300/0f0" alt="" /> <a href="https://www.mysite.co.uk/Silentnight-Divan-Beds-and-Mattresses-c99"> <img id="front-end-top" src="http://placehold.it/300/00f" alt="" /> </a> <img id="front-end-top" src="http://placehold.it/300/f0f" alt="" /> </div>