在小屏幕上隐藏/显示图像

时间:2018-07-19 15:20:26

标签: javascript angular angular-material angular-material2

我在前端使用Angular material-2, 我想为台式机和手机屏幕显示不同的图像

我的代码如下所示

<div class="banner">
  <img [src]="images.desktopBanner"/>
  <img [src]="images.mobileBanner"/>
</div>

我想在大型设备上显示desktopBanner图像,在小屏幕上显示mobileBanner。

注意:标记显示:不使用媒体查询不是最好的解决方案,因为这可能不会同时显示两个图像,但是如果您检查网络呼叫,它将仍然下载两个图像。

2 个答案:

答案 0 :(得分:3)

我建议您阅读这两篇文章:

这些文章的重点解释了<picture><img srcset="...">的用例。

本质上,如果您尝试以不同的质量级别显示相同的图像(这是一个响应性用例),则应使用<img srcset="...">

<img 
   src="swing-400.jpg" 
   sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 
   srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" 
   alt="Kettlebell Swing" />

如果您要显示截然不同的图像,则可能是在谈论艺术指导,<picture>很有道理,因为:

  

为什么我们不能对尺寸/ srcset进行美术指导?

     

根据设计,size / srcset语法会考虑视口的   宽度以及屏幕的DPR。将美术指导添加到同一美术指导中   语法将意味着Web开发人员必须明确   在标记中指定所有DPR和视口宽度组合。

     

这会使网络开发人员的工作更加困难,并且   本来会使语法更难掌握并且明显更多   详细。

因此语法类似于:

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The president giving an award.">
</picture>

这两种解决方案都具有良好的支持:除了IE之外的所有内容,以及一种回退到常规非精美渲染的方法。

答案 1 :(得分:0)

这是使用innerWidth DOM对象的属性window的解决方案:

isMobile() {
  return window.innerWidth <= 640;
}
<div class="banner">
    <img *ngIf="!isMobile()" [src]="images.desktopBanner"/>
    <img *ngIf="isMobile()" [src]="images.mobileBanner"/>
</div>

在这里,images.mobileBanner将在浏览器的内部宽度小于等于 640px (根据您的要求...)时显示,否则将使用images.desktopBanner