如何为IPython.display生成的图片添加CSS使其占父容器100%宽度？

方法1：给Output容器添加自定义CSS类（推荐） #

通过给目标Output组件添加专属CSS类，再针对性编写CSS规则，不会影响全局的<img>标签：

1. 修改Python代码，给Output组件添加自定义类：

import ipywidgets as widgets
from IPython import display
from PIL import Image

# 创建Output组件并添加自定义类
activeViewFromArray = widgets.Output()
activeViewFromArray.add_class("custom-image-output")

# 在Output中展示图片
with activeViewFromArray:
    display.display(Image.fromarray(array))

# 渲染Output组件
display.display(activeViewFromArray)

2. 注入专属CSS规则，用IPython.display.HTML执行：

display.display(display.HTML("""
<style>
/* 仅针对custom-image-output类下的img标签生效 */
.custom-image-output img {
    width: 100% !important;
}
</style>
"""))

!important用于确保该规则优先级高于Jupyter默认的图片样式，避免被覆盖。

方法2：直接生成带样式的HTML图片标签 #

绕开默认的图片渲染逻辑，手动生成带内联样式的<img>标签，精准控制当前图片的宽度：

from IPython import display
from PIL import Image
import io
import base64

# 将数组转成PIL Image并编码为base64
img = Image.fromarray(array)
buf = io.BytesIO()
img.save(buf, format='PNG')
img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')

# 生成带100%宽度样式的img标签并展示
display.display(display.HTML(f'<img src="data:image/png;base64,{img_base64}" style="width: 100%;" />'))

这种方式无需额外的CSS注入，直接通过内联样式控制单张图片的宽度。

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