hv.Raster: maintain exact aspect ratio with responsive=True

HoloViews
1

I’m building an interactive application in which I’m displaying a lot of images. I originally started developing it with bokeh but ran into too many problems, the main one being I couldn’t figure out how to show images with an aspect ratio of 1. This is what brought me to the holoviz ecosystem, because whoever developed hv.Raster figured it out for me :pray:t2:. (That, and all the cool panel and param stuff I learned about along the way)

I’ve developed most of the components I need and started putting them together and creating the top-level layout. Ideally I’d like things to resize to take up as much space in the browser viewport as possible. I noticed however that when I use the responsive=True to hv.Raster, the aspect ratio of the images isn’t preserved anymore. Although it stays close to 1 it’s not exact. This becomes more obvious

  1. The larger the image is displayed.
  2. When showing a lot of images in a grid. I’m not doing this through a holoviews layout because I have a component that shows an image along with various GUI widgets, so I’m basically laying out instances of this component in a grid.

Is there any way to use responsive sizing while maintaining image aspect ratio? Or is this a limitation of holoviews/bokeh?

2

data_aspect=1 maybe

3

I’m already using aspect="equal". Works fine when responsize=False, not when it’s True. Setting data_aspect separately doesn’t seem to make a difference.

4

Are you using panel with responsive=True?
pn.pane.Holoviews(hv_obj.opts(responsive=True, data_aspect=1), sizing_mode=“scale_both”)

5

Or maybe

hv.Layout([hv.Curve([0, 1, 2]).opts(responsive=True)]).opts(sizing_mode="scale_both")```
6

I’m doing something like hv.Raster(image).opts(aspect='equal', responsive=True), then rendering that to a bokeh model, making a few small changes, and then placing the bokeh figure into a panel.pane.Bokeh. I was using sizing_mode='scale_both' and the image does indeed scale to fill the container, however the aspect ratio doesn’t stay exactly 1 in that case. I’ve tried a bunch of different permutations, and the aspect ratio problem happens only when responsive=True.

I’ve gone back to setting it to False and making everything fixed size.

7

aspect_ratio maybe in panel? do you have some minimal code to reproduce?