如何在移动和桌面设备中显示不同的图像

Question

您好谁能告诉我如何在桌面和移动设备上显示不同的横幅图像。这是我的代码。

HTML:

 <div class="row">
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    <h2 class="careerbannertext1">Are you fanatically driven and ready to take on some of the best challenges the industry has to offer? </h2>
    <h2 class="careerbannertext2">Come join us,be inspired to do the best work of your life!</h2>
</div>

现在在我的桌面版本中它正在显示此图像我需要在移动版本中更改另一个图像。

原文由 user6728960 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我无法删除我接受的答案，所以请不要使用它。最好的方法是使用带有来源的标签图片，例如 Ron.Basco post：

 <picture>
   <source
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png"
   alt="a cute kitten">
</picture>

我最初接受的答案不好，因为图像将加载到每个设备上：

 .img-responsive.mobile {
  display: none;
}

@media only screen and (max-device-width: 480px) {
  .img-responsive {
    display: none;
  }
  .img-responsive.mobile {
    display: block;
  }
}

 <div class="row">
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    ...
</div>

原文由 maťo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以试试这个：

 <picture>
   <source
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png"
   alt="a cute kitten">
</picture>

图片标签仍然存在，因此您可以为不支持图片标签的其他浏览器放置默认图片。

原文由 Ron.Basco 发布，翻译遵循 CC BY-SA 3.0 许可协议