cssimageprimeng

"object-fit: contain" not working in PrimeNg p-image

CSS "object-fit: contain" does not work in PrimeNg p-image component.

<p-image [src]="image" alt="Image" appendTo="body" height="550vw" width="100%" style="object-fit: contain"></p-image>

Is there anything i missed. Also tried it with a different way with the same result:

[style]="{ objectFit: 'contain' }"
Solution

  • Have you tried imageStyle which is given as an option for styling the actual image in the docs - PrimeNg Image Api Tab.

    name type default description
    imageClass string null Style class of the image element.
    imageStyle Object null Inline style of the image element.
    styleClass string null Class of the element.

    Snippet:

        <div class="card flex justify-content-center">
    <p-image
        [src]="'https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg'"
        alt="Image"
        appendTo="body"
        height="550vw"
        width="100%"
        [imageStyle]="{objectFit: 'contain'}"
    ></p-image>
    </div>

    Stackblitz Demo