如何在移动设备和桌面设备上显示不同的图像 [英] How to display different images in mobile and desktop devices

问题描述

HTML：

我可以告诉我如何在桌面和移动设备上显示不同横幅图片。这里是我的代码。

 < div class =row> 
 < h2 class =careerbannertext> LIFE AT TEKNOTRAIT< / h2> 
< h2 class =careerbannertext1>你是否受到狂热的驱使，并准备好接受行业提供的一些最好的挑战？ < / H2> 
< h2 class =careerbannertext2>快来加入我们吧，受到启发，做您生活中最好的工作！< / h2> 
< / div> 
  

现在，在我的桌面版本中，它显示了这张图片，我需要更改移动版本中的其他图片。

解决方案

例如：
$ b

  .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.pngclass =img-responsive careerpage> < img src =image\bannerimages\Career-mobile.pngclass =img-responsive careerpage mobile> < h2 class =careerbannertext> LIFE AT TEKNOTRAIT< / h2> ...< / div>  

Hi can anyone tell me how to display differnet banner images in desktop and mobile devices.Here is my code.

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>

Right now in my desktop version it is displaying this image i need to change another image in mobile version.

解决方案

For example:

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

这篇关于如何在移动设备和桌面设备上显示不同的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！