Unfortunately, automatic sizing is causing more trouble than it's actually worth due to there being two different image sizes and the code you gave me for restricting max height conflicts with the existing code of the theme so it would in fact be better to have manual scale control in this case.
Currently I my CSS is as follows:
.portable-infobox { width:282px; border:3px ridge #FF84C4; border-radius:10px; }
.portable-infobox .pi-header, .portable-infobox .pi-title, .portable-infobox .pi-navigation { margin:2px; margin-bottom:0; padding:0; }
.portable-infobox .pi-item-spacing { text-align:center; padding:2px; }
.portable-infobox .pi-title, .portable-infobox .pi-data-label, .portable-infobox .pi-secondary-background { background-color:#FF84C4; color:#FFF; }
.pi-background { background:transparent; }
.pi-image img { width:100%; height:auto; margin-top:2px; }
.pi-item[data-source="image"] .pi-data-value { margin-left: auto; margin-right: auto; }
.pi-border-color { border-color:#FF84C4; }
.pi-title { border-radius:6px 6px 0 0; font-weight:bold; }
.pi-header { border-radius:0 0 0 0; }
.pi-data-label { border-radius:0 8px 8px 0; display:flex; flex-direction:column; justify-content:center; }
.pi-data-value { margin: 0.4em 0; }
.pi-header:nth-child(3) { font-weight:normal; font-style:italic; border-top:1px dotted; margin-top:0; }
.pi-header:last-child { border-radius:0 0 6px 6px; margin-bottom:2px; }
.pi-header:last-child a { color:white; }