Hide/show 小屏幕上的图像

Question

我的前端使用 Angular material-2，我想为桌面和移动屏幕显示不同的图像

我有下面显示的代码

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

我想在大屏幕上显示 desktopBanner 图片，在小屏幕上显示 mobileBanner。

注意：使用媒体查询标记 display:none 不是最佳解决方案，因为这可能不会同时显示两个图像，但如果您检查网络调用，它仍会下载两个图像。

Answer 1

我建议你阅读这两篇文章：

这些文章的重点解释了两者的用例 <picture> and <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> 是有道理的，因为：

Why can’t we do art-direction with sizes/srcset?

By design, the sizes/srcset syntax takes into account the viewport’s width as well as the screen’s DPR. Adding art-direction into the same syntax would have meant that the web developer has to explicitly specify all the DPR and viewport width combinations in the markup.

That would have made the web developer’s job much more difficult and would have made the syntax much harder to grasp and significantly more verbose.

所以语法类似于：

<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 之外的所有解决方案，以及一种回退到常规、非花哨渲染的方法。

Answer 2

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

isMobile() {
  return window.innerWidth <= 640;
}

<div class="banner">
    <img *ngIf="!isMobile()" [src]="images.desktopBanner"/>
    <img *ngIf="isMobile()" [src]="images.mobileBanner"/>
</div>

此处，当浏览器的内宽小于等于640px（根据您的要求调整...）时，将显示images.mobileBanner，images.desktopBanner否则将被使用。

Hide/show 小屏幕上的图像

Hide/show image on small screen

javascript

angular-material

angular-material2

angular