在小屏幕上隐藏/显示图像 [英] Hide/show image on small screen
问题描述
我在前端使用Angular material-2， 我想为台式机和手机屏幕显示不同的图像
I am using Angular material-2 for my frontend, I want to display different images for desktop and mobile screens
我的代码如下所示
<div class="banner">
<img [src]="images.desktopBanner"/>
<img [src]="images.mobileBanner"/>
</div>
我想在大型设备上显示desktopBanner图像，在小屏幕上显示mobileBanner.
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
这些文章的症结解释了 <picture> 和 <img srcset="..."> .
The crux of these articles explain use cases for both <picture> and <img srcset="...">.
本质上，如果您尝试以不同的质量级别显示相同的图像(这是一个响应性用例)，则应使用<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" />
如果要显示非常不同的图像，则可能是在谈论美术指导，在这种情况下，<picture>是有道理的，因为:
If you want to show very different images, you are likely talking about art direction in which case, <picture> makes sense because:
为什么我们不能对尺寸/srcset进行美术指导?
Why can’t we do art-direction with sizes/srcset?
根据设计，size/srcset语法考虑了视口的 宽度以及屏幕的DPR.将美术指导添加到同一美术指导中 语法将意味着Web开发人员必须明确 在标记中指定所有DPR和视口宽度组合.
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之外的所有内容，还有一种回退到常规非精美渲染的方法.
Both solutions have good support: everything but IE, as well as a way to fallback to regular, non-fancy rendering.
这篇关于在小屏幕上隐藏/显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
