在小屏幕上隐藏/显示图像 [英] Hide/show image on small screen

问题描述

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

我在下面显示了这个代码

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

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

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

解决方案

建议你阅读这两篇文章:

• .

  本质上，如果您试图以不同的质量级别显示相同的图像，这是一个响应用例，您应该使用 <img srcset="...">:

  如果你想展示非常不同的图像，你很可能在谈论艺术指导，在这种情况下， 是有道理的，因为:

  <块引用>

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

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

  那会使 Web 开发人员的工作变得更加困难并且会使语法更难掌握，而且明显更多详细.

  所以语法类似于:

  <图片><source media="(min-width: 45em)" srcset="large.jpg"><source media="(min-width: 32em)" srcset="med.jpg"><img src="small.jpg" alt="总裁颁奖."></图片>

  这两种解决方案都有很好的支持:除了 IE 之外的一切，以及一种回退到常规、非花式渲染的方法.

  I am using Angular material-2 for my frontend, I want to display different images for desktop and mobile screens

  I have this code shown below

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

  I want to display desktopBanner image in large devices and mobileBanner in small screens.

  NOTE: marking display:none using media query is not the best solution as this might not display both the images together but if you check the network call it will still download both the images.

  解决方案

  I suggest you read these two articles:

  • Don’t use <picture> (most of the time)
  • Native Responsive Images

  The crux of these articles explain use cases for both <picture> and <img srcset="...">.

  Essentially, if you are trying to show the same image at different quality levels, which is a responsiveness use case, you should use an <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" />
  

  If you want to show very different images, you are likely talking about art direction in which case, <picture> makes sense because:

  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.

  So syntax would resemble:

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

  Both solutions have good support: everything but IE, as well as a way to fallback to regular, non-fancy rendering.

  这篇关于在小屏幕上隐藏/显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！