Picture Entity Aspect Ratio Position

I have three cameras that are 16x9 but my doorbell camera is 4:3. I’m able to get it to show more or less correctly in the grid by forcing the Picture Entity to an aspect ratio of 16:9 however this just crops off the bottom of the image.

Is there a way to set it to center the image when forcing an aspect ratio?

Card:
Screen Shot 2021-07-18 at 1.19.48 PM

Actual Image:

The code:

type: picture-entity
entity: camera.front_door
camera_image: camera.front_door
camera_view: live
show_name: false
show_state: false
aspect_ratio: '16:9'

You would probably have to use card-mod and the contain CSS option:

https://www.w3schools.com/css/css3_object-fit.asp

Looks like the default is cover, which clips the image/video.

Hi. Did you ever get this figured out? Having similar issue with Nest doorbell

I’m afraid not. Try as I might, I couldn’t find the appropriate CSS to remedy this issue.