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'
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.
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?
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.