在 Angular 15.1.x 项目中，我尝试使用 NgOptimizedImage 实现一个在移动和桌面上响应的图像。强制的 img 宽度和高度属性将覆盖尺寸属性。
<img ngSrc="image.png" width="617" height="505" sizes="(max-width: 768px) 276w, 317w">根据文档，这应该意味着如果视口 768 像素或更小图像宽度应显示 276 像素宽，否则显示 317 像素。我按照文档使用宽度/高度的内在函数。无论宽度/高度属性是多少（617 像素 X 505 像素），图像始终显示。
本质上我正在尝试实现这一目标，但使用 ngSrc:
<img src="image.png" srcset="img.png 617w" sizes="(max-width: 768px) 276px, 317px" ><img ngSrc="image.png" sizes="(max-width: 768px) 276px, 317px">
删除冲突的 CSS 规则：
仔细检查 CSS 是否存在可能在图像元素或其容器上设置固定尺寸的规则。这些可能包括： img { 宽度：617px;高度：505px； } 针对可能无意中影响图像大小的父元素或类/ID 的规则。 使用浏览器的开发人员工具检查元素并查看应用的样式。查找覆盖尺寸属性的任何规则。 验证内在尺寸（可选）：
虽然 Angular 文档建议使用固有大小调整（宽度：自动，高度：自动），但 NgOptimizedImage 可能不需要这些属性。如果存在，请尝试将其删除。 重点关注使用 Sizes 属性根据视口大小定义响应式图像宽度。