如何在PrimeNG中调整图片大小并保持宽高比

直接给<p-image>设置width和height属性会强制拉伸图片，导致比例失调。你可以通过以下方式修复：

1. 调整p-image组件属性 #

移除组件上的width和height属性，改用自定义样式类控制容器尺寸：

<p-image [src]="photo.img" [preview]="true" alt="Image" styleClass="square-img">
    <ng-template pTemplate="indicator">
       <i class="pi pi-check"></i>
    </ng-template>
</p-image>

2. 编写自定义样式 #

给square-img类设置固定宽高，同时控制内部图片的缩放行为：

.square-img {
    width: 250px;
    height: 250px;
    overflow: hidden; /* 隐藏超出容器的图片部分 */
}

.square-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 按比例缩放图片，填满容器，超出部分裁剪 */
    /* 若需要完整显示图片，可替换为 object-fit: contain; 此时容器会留空白 */
}

关于object-fit的可选值 #

• cover：图片按比例缩放至填满容器，超出边缘的部分会被裁剪，适合需要容器完全被图片填充的场景
• contain：图片按比例缩放至完整显示在容器内，容器未被填充的区域会留空白，适合需要展示完整图片的场景

设置完成后，容器会保持250×250的固定尺寸，图片则按原有宽高比自适应，不会出现拉伸变形。

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