时间戳

首页 > 解决方案 > 在小屏幕上隐藏/显示图像

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

问题描述

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

我的代码如下所示

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

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

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

标签： javascriptangularangular-materialangular-material2

解决方案

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

这些文章的核心解释了<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>是有道理的，因为：

为什么我们不能用 size/srcset 做艺术指导？

按照设计，sizes/srcset 语法考虑了视口的宽度以及屏幕的 DPR。将艺术指导添加到相同的语法中意味着 Web 开发人员必须在标记中明确指定所有 DPR 和视口宽度组合。

这会使 Web 开发人员的工作变得更加困难，并且会使语法更加难以掌握并且更加冗长。

所以语法类似于：

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

推荐阅读