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>

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

Answer 2

您可以通过为移动设备添加值为 (orientation: Portrait) 和为桌面设备添加值为 (orientation: Landscape) 的媒体属性来使用 source 元素。

示例：

<picture>
   <source 
      media="(orientation: landscape)"
      srcset="testlandscape.png">
   <source 
      media="(orientation: portrait)"
      srcset="testportrait.png">
      
 <img src="testlandscape.png" width="100%" height="auto">
</picture>

Answer 3

例如：

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

Answer 4

改为使用this method。我仍在学习它，但是比这里提到的其他方法更好。除了仅在HMTL中完成之外，它也不会在后台下载不需要的图像（例如，它不会下载高分辨率的桌面图像而只是将其隐藏，就像CSS显示一样：无）。

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

4 个答案: