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?

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:


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.

I was also messing with the card-mod CSS without luck. :frowning:

Simple picture card was working in this way:

type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
  style: |
    img {
      width: 100px;
      height: 50px;
      object-fit: fill;

For live rtsp video card it doesn’t work. I tried to switch the “img” to “video”. nothing helped.
Only this has any effect:

  style: |
    ha-card {
      width: 100px;
      height: 50px;
      object-fit: fill;

But unfortunately it takes consider only the with parameter, it doesn’t use the height. So I couldn’t change the aspect ratio in this way.
Has anyone any results in this topic?

I am facing the same issue. Anyone able to figure this out?

I finally found a solution using the frigate card. It has options for controlling precisely this.