css - 使用响应式设计时可以在标题中交换图像吗？

Question

我正在学习响应式设计，我想知道是否可以根据视口大小交换标题中的图像？我可以通过使用不同的宽度设置来缩放图像，例如在小视口中时为 100% 的宽度，而在视口较大时为 30% 的宽度。但我也想换成另一张图片。Preciate一些帮助来解决这个问题！

HTML：

<header class="mainHeader">
    <img src="img/logo.gif">

    <nav>
        <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        </ul>
    </nav>

</header>

CSS正常：

.mainHeader img {
width: 30%;
height: auto;
margin: 2% 0;
}

CSS：

@media only screen and (min-width: 150px) and (max-width: 600px)
{

.body {
width:  90%;
font-size:  100%;
}

.mainHeader img {
width: 100%
}

}

Answer 1

我会按照以下方式进行：

<header class="mainHeader">
    <img src="img/logo.gif" id="img1">
    <img src="img/logo2.gif" id="img2">

    <nav>
        <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        </ul>
    </nav>

</header>

并在 CSS 中根据您想要的宽度反转图像的显示：

@media only screen and (min-width: 150px) and (max-width: 600px)
{

.body {
width:  90%;
font-size:  100%;
}

.mainHeader img #img1 {
width: 100%;
display:block;
}

.mainHeader img #img2 {
width: 100%
display:none;
}


}

Answer 2

演示

<header class="mainHeader">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
</header>

.mainHeader img {
    width: 30%;
    height: auto;
    margin: 2% 0;
}
.mainHeader img+img {
  display:none;
}

@media (min-width: 150px) and (max-width: 600px){

  .mainHeader img {
    display:none;
    width: 100%
  }
  .mainHeader img+img {
    display:block;
  }

}

Answer 3

用 js 匹配媒体

 <script>
 if (window.matchMedia("(min-width: 150px) and (max-width: 600px)").matches) {
     //swap image
}
 </script>