Question

当屏幕尺寸小于500像素（例如）时，我正在尝试使用javascript将图像叠加在两个图像之上。这些图像中的每一个都可以具有href链接，但并非总是如此。

这是一些大于500像素的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

尽管建议使用类和外部CSS规则，但是您可以使用javascript及其matchMedia并更改内联样式。

堆栈片段

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 media query和外部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>

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

2 个答案: