Html 媒体查询-为不同设备交换图像

我对编码还不熟悉，我一直在想如何改变WordPress主题中的某些元素，其中之一是在桌面上显示完整的LinkedIn图像，但在移动设备上它会切换到较短的徽标[in]

多亏我读了几篇关于StackOverflow的文章，我才有了这个功能。不过，这个修复程序已经在Linkedin的徽标下下拉了“行动呼吁”。我敢肯定这是一个真正的新手错误，我完全错过了一些东西，但我一辈子都不能在Linkedin徽标旁边，无论是在桌面上还是在手机上，让行动的呼声再次响起。（我有一种感觉，这可能与周围的div有关，但我看不到任何宽度可以在Chrome Inspect中更改以使其弹出到徽标旁边的东西）

守则如下：

HTML

<a href="www.linkedin.com" target="_blank">
<div class="exampleimage"></div></a>
<a href="tel:123 456 789">Need Help? Call » 123 456 789</a>



CSS
.exampleimage{
   background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-Company-LinkedIn-Logo.png");
   background-size: contain;
   width: 140px;
   height: 18px; 

}

@media only screen and (max-width: 500px){

   .exampleimage{
       background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-LinkedIn-Logo-small-version.png");
    background-size: cover;
         width: 22px;
     height: 18px;
   }
}

HTML
CSS
.例如图像{
背景图像：url（“http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-Company-LinkedIn-Logo.png");
背景尺寸：包含；
宽度：140px；
高度：18px；
}
@仅介质屏幕和（最大宽度：500px）{
.例如图像{
背景图像：url（“http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-LinkedIn-Logo-small-version.png");
背景尺寸：封面；
宽度：22px；
高度：18px；
}
}

任何帮助都将不胜感激

---

：）

媒体查询中是否缺少.jpeg

   background-image: url("Linkedinlogo2.jpg");

---

我建议你先用手机。 请记住，您不能在移动背景图像（.jpg/.jpeg）上添加文件类型，这是它无法工作的主要原因

CSS
.exampleimage{
  background-image: url("Linkedinlogo2.jpg");
  background-size: cover;
  width: 22px;
  height: 18px;
}

@media only screen and (min-width: 501px){
  .exampleimage{
    background-image: url("Linkedinlogo1.jpeg");
    background-size: contain;
    width: 140px;
    height: 18px;
  }
}

---

将链接放在真实图像上，而不是相对链接，这样我们就可以测试您的代码我已经在Now中添加了路径没有图像显示我刚刚编辑了文件路径以将其放在stackoverflow上我已经在stackoverflow上的文本框中编辑了文件路径。所以这不是问题所在。