限制文生图 图片的展示尺寸

[echoniuniu]

当我在使用文生图时候他返回图片是如下这样的 ，感觉展示样式太大了，在聊天窗口中不能直接观察到图片整体

而且程序UI本身提供了，如下大图预览功能

下面是我手动使用 css 样式调节的

希望能够像下面这样限制图片展示尺寸，相对于当前聊天对话框窗口，能够直接的看到图片的整体

[arvinxx]

这个实现上感觉不太行。不太可能动态感知窗口尺寸来调整大小的

[echoniuniu]

请理解,我并不特别清楚 当前使用什么UI框架开发的,

我通过前端工具 找到一个窗体,通过监听他可以动态改变图片尺寸

我手写了下面一个脚本 来 完成这件事, 供参考

const targetElement = document.querySelector('.acss-9v0z6m');
// 因为是前端工具 渲染的,这个窗体好像没有一个实在的类名
const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        if (entry.target === targetElement) {
            const newHeight = entry.contentRect.height;
            const newWidth = entry.contentRect.width;
            let visMin = Math.min(newHeight, newWidth) * 0.5;
            const imageElements = document.querySelectorAll('.ant-image');
            imageElements.forEach(imageElement => {
                imageElement.style.maxWidth = `${visMin} px`;
                imageElement.style.maxHeight = `${visMin} px`;
                const imageChildElements = Array.from(imageElement.children);
                imageChildElements.forEach(imageChildElement => {
                    imageChildElement.style.maxWidth = `${visMin}px`;
                    imageChildElement.style.maxHeight = `${visMin}px`;
                });
            });
        }
    }
});

resizeObserver.observe(targetElement);

我不是很会写js, 不过外挂js 脚本也是件很不优雅的事

2024-02-28.21-38-06.mp4

[echoniuniu]

可能我描述不太清楚,就是下面箭头这一部分 所谓"聊天窗口"

[arvinxx]

我个人觉得后面可以给个配置来设定默认的图片大小，目前是写死的。但是按视窗进行动态化缩放，这个应该不计划做的