Dash中使用imshow时如何让图像占满整个Div宽度？

问题描述 #

我正在开发一个Dash应用，布局包含主显示区域和左侧控制栏。使用Plotly Express的imshow展示图像时，图表已占满主区域宽度，但画布居中保留原始宽高比，放大操作时两侧会出现黑边。需要让图像完全占满整个主显示区域，不受原始宽高比限制。

当前效果：图像居中显示，两侧带有黑边，未填满容器

原代码 #

import plotly.express as px
import pydicom as dic

img = dic.read_file('front/assets/test_img.dicom').pixel_array

fig = px.imshow(img, binary_string=True, template='plotly_dark')
fig.update_yaxes(
    ticklabelposition="inside top",
    title=None,
    ticks="inside", 
    ticklen=10,
    tickcolor='white',
    minor_ticks="inside")

fig.update_xaxes(
    ticklabelposition="inside",
    title=None,
    ticks="inside",
    ticklen=10,
    tickcolor='white',
    minor_ticks="inside")
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0, autoexpand=False))

解决方案 #

核心是取消图像的固定宽高比限制，同时配置轴自适应容器尺寸。修改后的代码如下：

import plotly.express as px
import pydicom as dic

img = dic.read_file('front/assets/test_img.dicom').pixel_array

# 添加aspect='auto'，取消图像原始宽高比约束
fig = px.imshow(img, binary_string=True, template='plotly_dark', aspect='auto')

fig.update_yaxes(
    ticklabelposition="inside top",
    title=None,
    ticks="inside", 
    ticklen=10,
    tickcolor='white',
    minor_ticks="inside",
    # 让y轴自适应容器，取消与x轴的锚定关系
    constrain='domain',
    scaleanchor=None
)

fig.update_xaxes(
    ticklabelposition="inside",
    title=None,
    ticks="inside",
    ticklen=10,
    tickcolor='white',
    minor_ticks="inside",
    # 让x轴自适应容器宽度
    constrain='domain'
)

# 保持无留白，开启自动适配容器尺寸
fig.update_layout(
    margin=dict(l=0, r=0, t=0, b=0),
    autosize=True
)

关键改动说明 #

• aspect='auto'：取消图像的原始宽高比限制，允许图像拉伸以适配容器
• 轴配置constrain='domain'：让轴的范围完全适配图表容器的尺寸
• y轴设置scaleanchor=None：解除y轴与x轴的锚定关系，允许两者独立拉伸
• autosize=True：确保图表自动适配父容器的大小

修改后，图像会完全填充整个主显示区域，无论容器尺寸变化或进行放大操作，都不会出现黑边，同时保留了原有的轴样式配置。

内容的提问来源于stack exchange，提问作者edoelas