在服务器端呈现时加载时，图像扩展到100%。
在服务器端呈现时加载时，图像扩展到100%。
提问于 2019-08-30 06:31:18
我有以下代码，它使用角度材料使我的图像响应：
<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%。这是工作的，除了，因为我实现了服务器端渲染通过角环球，我得到一个闪光灯100%，甚至在大屏幕上。
如果我查看源代码(禁用缓存)，我可以看到来自服务器的标记包括style="width: 100%"，这意味着服务器端呈现的版本认为屏幕非常小。
我如何让角环球知道什么是屏幕分辨率，我如何将这些信息传递给角质物质，并覆盖它认为是什么分辨率，以便它选择正确的宽度？
更新
我认为我是通过用户代理字符串检测到它是否是移动浏览器，然后设置默认断点，如下所述：https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout。
FlexLayoutModule.withConfig({ssrObserveBreakpoints: [isMobile() ? 'xs' : 'md']})但我肯定做错了，因为我没有看到任何效果。
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-08-30 08:43:40
您可以考虑使用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>.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;
}
}Stack Overflow用户
发布于 2019-09-11 01:46:33
请尝试下面的CSS，这将保持比率。
.img-fluid {
max-width: 100%;
height: auto;
}Stack Overflow用户
发布于 2021-06-16 17:36:10
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57728712
复制相关文章
相似问题
腾讯云开发者
