PrimeNg p-image组件中object-fit: contain属性不生效问题排查

问题根源在于你直接给<p-image>组件设置的style会作用在组件的外层容器div上，而不是内部实际渲染的<img>标签，所以object-fit属性没生效。

给你两种可行的解决方法：

• 方法一：使用组件自带的imageStyle输入属性
  PrimeNG的p-image专门提供了imageStyle属性来配置内部img元素的样式，直接用这个属性绑定即可：

<p-image 
  [src]="image" 
  alt="Image" 
  appendTo="body" 
  height="550vw" 
  width="100%"
  [imageStyle]="{ objectFit: 'contain' }"
></p-image>

• 方法二：通过CSS穿透设置内部img样式
  如果需要用全局或组件级CSS来控制，可以用样式穿透（比如Angular中的::ng-deep）定位到内部的img标签：

::ng-deep .p-image img {
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者stylepatrick