can't get NgOptimizedImage to be responsive in Angular 15

Question

In an Angular 15.1.x project, i'm trying implement an image that is responsive on mobile and desktop using NgOptimizedImage. The mandatory img width and height attributes are overriding the sizes attribute.

<img ngSrc="image.png" width="617" height="505" sizes="(max-width: 768px) 276w, 317w">.

According to the docs, this should mean if viewport 768px or less image width should display 276px wide otherwise 317px. I'm using the intrinsic for width/height as per docs. The image always shows at whatever the width/height attribute is (617px X 505px).

Essentially i'm trying to achieve this but using ngSrc:

<img src="image.png" srcset="img.png 617w" sizes="(max-width: 768px) 276px, 317px" >

Weeds

Have you find any answer to this topic? I'm on the same quest :D – Windstorm

Answer 1

<img ngSrc="image.png" sizes="(max-width: 768px) 276px, 317px">

Remove Conflicting CSS Rules:

Double-check your CSS for rules that might be setting fixed dimensions on the image element or its container. These could include: img { width: 617px; height: 505px; } Rules targeting parent elements or classes/IDs that might unintentionally affect the image size. Use your browser's developer tools to inspect the element and see the applied styles. Look for any rules overriding the sizes attribute. Verify Intrinsic Sizing (Optional):

While the Angular documentation suggests using intrinsic sizing (width: auto, height: auto), these properties might not be necessary with NgOptimizedImage. Try removing them if present. Focus on using the sizes attribute to define responsive image widths based on viewport size.

Aweless