simple challenge, no easy fix?
have a picture-entity card with a default camera stream from Buienradar integration. I want to have it squared, so I can fit it in a stack/grid or other config, next to a 1/1 custom:button-card.
There is no property I can find to auto resize this picture-entity so it always covers the square it should. I can give it a larger canvas, but then it doesnt resize properly, and ofc, therein lies the challenge. Have it show properly on desktop And mobile:
- type: horizontal-stack
cards:
- !include /config/dashboard/includes/button/include_button_animated_weather.yaml
- type: picture-entity
card_mod:
style:
hui-image:
$: |
#image {
object-fit: cover;
}
if I mod the card itself, the image wont change along, so I probably need to set the #image property.
my goal is to tie these together and flatten the picture with:
- type: custom:mod-card
card_mod:
style: |
ha-card {
--stack-card-margin: 0px;
--ha-card-box-shadow: none;
}
card:
and have it show like:
fwiw, stack-in-in-card has the identical result:
- type: custom:stack-in-card
mode: horizontal
cards:
- !include /config/dashboard/includes/button/include_button_animated_weather.yaml
- type: picture-entity
the official way to make an image resize automatically, as instructed at W3 seems to already been implemented…:
- type: picture-entity
card_mod:
style:
hui-image:
$: |
#image {
max-width: 100%;
height: auto;
}
makes no difference what so ever
Please have a look how I can make this fit better?
thx
Update
made a wild guess and searched for ‘ratio’… lo and behold;
- type: custom:stack-in-card
mode: horizontal
cards:
- !include /config/dashboard/includes/button/include_button_animated_weather.yaml
- type: picture-entity
card_mod:
style:
hui-image:
$: |
#image {
aspect-ratio: 1/1;
}
entity: camera.buienradar
show_state: false
show_name: false
camera_view: auto
which resizes perfectly on any size. ofc the image is a bit out of perspective. Still havent found a way to zoom in only. other than
transform: scale(1.2);
which loses the time stamp in the top. does keep the perspective 100%
should have though of that earlier, since button-card uses that with a reason ![:wink: :wink:](https://community.home-assistant.io/images/emoji/twitter/wink.png?v=10)
see: aspect-ratio | CSS-Tricks - CSS-Tricks for some extra explanation
bingo!