在服务器端渲染时加载时图像拉伸到 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-with-Flex-Layout

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

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

Answer 1

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

这是一个例子：

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

.my-picture, .my-picture img, .my-picture source {
  width: 448px;
  height: 60px;
}

@media only screen and (min-width : 480px) {
  .my-picture, .my-picture img, .my-picture source {
    width: 100%;
    height: auto;
  }
}

Answer 2

请尝试下面的 CSS 将保持比例。

 .img-fluid {
    max-width: 100%;
    height: auto;
     }

Answer 3

FlexLayout 可以 support server side rendering 有一定的限制。

如果不先阅读此文档，我不会尝试使用它

Angular Flex Layout - Server Side Rendering

Answer 4

您可以在 Typescript 中设置一个变量来说明屏幕是否处于移动状态（按宽度），然后更改类。

这是一个例子：

isMobile = false;
ngOnInit() {
    if (window.screen.width <= 480) { // 768px portrait
      this.isMobile = true;
    }
}

然后在您的模板中：

<picture [ngClass.xs] = "isMobile">
 ...
</picture>

编辑：

我看到您希望将屏幕尺寸输入服务器。除非您向他发送此数据并保存，否则服务器无法获取屏幕大小。您可以在客户端启动时将window.screen.width 发送到服务器，然后以您拥有的屏幕尺寸为特定用户提供服务。

Answer 5

如果您想在整个站点中保持相同的大小。比它可能对你有帮助。

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

<style>
        .my-picture {
          width: 448px;
          height: 60px;
        }

        @media only screen and (max-width : 480px) {
          .my-picture {
            width: 100%;
            height: auto;
          }
        }

       @media only screen and (max-width : 667px) {
          .my-picture {
            width: 50%;
            height: auto;
          }
        }

       @media only screen and (min-width : 668px) {
          .my-picture {
            width: 448px;
           height: 60px;
          }
        }

</style>

您可以根据自己的要求更改尺寸。