服务器端渲染时，加载时图像拉伸至100％

Question

我有以下代码使用Angular Material使我的图像响应：

<picture [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
  <source srcset="/assets/images/logo-text-lg.webp" type="image/webp" [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
  <source srcset="/assets/images/logo-text-lg.png" type="image/png" [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
  <img src="/assets/images/logo-text-lg.png" alt="TechScore" [ngStyle.xs]="{'width': '100%'}" [ngStyle.gt-xs]="{'width': '448px', 'height': '60px'}">
</picture>

我们的目标是将其精确设置为448x60，除非它位于超小屏幕上。那么它应该是页面宽度的100％。除了通过我通过Angular Universal实现服务器端渲染外，即使在较大的屏幕上，也可以100％的速度获得图像的闪光。

如果查看源代码（禁用了缓存），可以看到来自服务器的标记包括在内style="width: 100%"，这意味着服务器端呈现的版本认为屏幕很小。

如何让Angular Universal知道屏幕分辨率是什么，以及如何将该信息传递给Angular Material并覆盖它认为的分辨率，以便它选择正确的宽度？

更新资料

我以为可以通过用户代理字符串检测它是否是移动浏览器，然后按如下所述设置默认断点来了解某些东西：https : //github.com/angular/flex-layout/wiki/Using-SSR-带柔性布局

FlexLayoutModule.withConfig({ssrObserveBreakpoints: [isMobile() ? 'xs' : 'md']})

但我一定做错了，因为我没有看到任何效果。

Answer 1

您可以考虑使用 CSS 媒体查询来处理图像的响应式样式。然后不会将硬编码的内联样式发送到客户端。浏览器将决定如何初始渲染图像。在应用适当的样式之前，您不必等待 JavaScript 执行（闪现！）。

下面是一个例子：

<picture class="my-picture">
  <source srcset="/assets/images/logo-text-lg.webp" type="image/webp">
  <source srcset="/assets/images/logo-text-lg.png" type="image/png" >
  <img src="/assets/images/logo-text-lg.png" alt="TechScore">
</picture>

<picture class="my-picture">
  <source srcset="/assets/images/logo-text-lg.webp" type="image/webp">
  <source srcset="/assets/images/logo-text-lg.png" type="image/png" >
  <img src="/assets/images/logo-text-lg.png" alt="TechScore">
</picture>