Bug with camera image display: the image's bottom part is missing

[almirus]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

When displaying the camera image, the bottom part is "cut off." The image is not vertically centered.

Describe the behavior you expected

The image must be centered

Steps to reproduce the issue

1. Add a camera entity.
2. Ensure that the bottom part is cut off and not displayed.

What version of Home Assistant Core has the issue?

2024.6.4

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome 126.0.6478.63

Which operating system are you using to run this browser?

win 11

State of relevant entities

No response

Problem-relevant frontend configuration

square: false
type: grid
cards:
  - type: entity
    entity: sensor.time
  - show_state: false
    show_name: false
    camera_view: live
    type: picture-entity
    entity: camera.camera_hub_g2h_e718_camera_stream_management0
    camera_image: camera.doorbell_repeater_b8b7
columns: 2

show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.doorbell_repeater_b8b7
camera_image: camera.doorbell_repeater_b8b7

Javascript errors shown in your browser console/inspector

No response

Additional information

original image (camera stream)

original image

[almirus]

https://github.com/home-assistant/frontend/blob/d4ace2eca510740dc7f5d4c4e38f120962326bbd/src/panels/lovelace/cards/hui-picture-entity-card.ts#L193

needed to add

ha-camera-stream img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%; 
  min-width: 100%; 
}