javascript - 当屏幕尺寸小于500px时，使用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%;
    }

}