时间戳

首页 > 解决方案 > 当屏幕尺寸小于 500 像素时，使用 javascript 垂直堆叠图像

javascript - 当屏幕尺寸小于 500 像素时，使用 javascript 垂直堆叠图像

问题描述

当屏幕尺寸小于 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

寻找任何可以帮助我实现这一目标的帮助或建议。

标签： javascript

解决方案

你试过用 CSS 媒体查询来做吗？

@media (max-width: 500px) {

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

}

推荐阅读