Constrain Images

Hi all, loving HABpanel and well on the way to something really functional for our household so thanks for the great work! One issue I’ve come across is in my attempt to display web cameras in a template widget. Following other forum posts I’ve created a carousel with multiple image widgets and this allows me to switch between multiple cameras using their MJPEG or JPEG source URL’s brilliantly. With one camera, however, the resolution is 4:3 (the others are 16:9), and the image expands beyond the extent of the widget box. By editing the HTML directly in Chrome using dev tools I can see that some of the parental DIV’s do not constrain the height and so adding tags like style=height:100% doesn’t make any difference. Has anyone come up with a workaround? I suspect these styles aren’t applied to the parents for good reason so I’m not sure modifying the base is the way to go. Thanks for any responses!

This is probably quite solvable CSS problem, you should post a template reproducing the situation so people can have a look at it - use a dynamic placeholder image generator - lorempixel,… even placecage/fillmurray will do :stuck_out_tongue:

It actually exists :joy:

I’m sure you haven’t seen nCage chrome extension yet :wink:

And now that I have the internet will never be the same again! :grimacing: Who makes this stuff?