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

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>

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

Answer 1

你可以试试这个:

<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>

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