Picture Entity Aspect Ratio Position

[BTallack]

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:

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'

[tom_l]

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.

[roofyw (Raf W.)]

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

[BTallack]

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

[magyarl89]

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

Simple picture card was working in this way:

type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
card_mod:
  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:

card_mod:
  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?

[pravardhan (Pravardhan Nagireddy)]

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

[pravardhan (Pravardhan Nagireddy)]

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

Aspect ratio setting not working as expected