Hide/show Image On Small Screen
Solution 1:
I suggest you read these two articles:
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.
Solution 2:
Here's a solution using property innerWidth of the window DOM object :
isMobile() {
return window.innerWidth <= 640;
}
<div class="banner">
<img *ngIf="!isMobile()" [src]="images.desktopBanner"/>
<img *ngIf="isMobile()" [src]="images.mobileBanner"/>
</div>
Here, images.mobileBanner will be displayed when browser's inner width is less of equal to 640px (tweak to your requirements...), images.desktopBanner will be used otherwise.
Post a Comment for "Hide/show Image On Small Screen"